如何在引导网格上获得 5 个大小相等的列？
Posted
技术标签:
【中文标题】如何在引导网格上获得 5 个大小相等的列？【英文标题】：How to get 5 columns of equal size on bootstrap grid? 【发布时间】：2020-09-02 12:58:29 【问题描述】：我希望我的布局为 5 列宽，但仅限于 xl 屏幕及以上。对于大屏幕，我想要 4 列，4 列用于中，2 列用于小/超小。
目前我有：
<div class="row mb-5">
% for item in foobar %
<div class="col-6 col-md-3 col-xl-2 py-2">
/* Content Here */
</div>
% endfor %
</div>
这是我到目前为止所管理的。它适用于所有屏幕尺寸，除了 xl 屏幕，我想要 5 列但我得到 6。
显然 12 不能被 5 整除，所以我不确定如何实现我想要的。
我尝试解决的问题：
在研究了其他一些堆栈交换答案后，我尝试将row-cols-xl-5 添加到行类中，但这没有效果。此外，我尝试在包含内容的 div 之前添加 <div class="col offset1-xl"></div>，虽然它确实给了我 5 个列，但它适用于所有屏幕尺寸，并且相邻的行无法正确排列，并且给出了奇怪的间距。
最简单/最好的方法是什么？
我知道 stackexchange 上已经存在类似的问题，但不同的是，它是关于获取 5 列但不参考屏幕尺寸，我希望它具有响应性，因此在某些尺寸的屏幕上只有 5 列！
【问题讨论】：
这是一个框架的盲目使用是不够的，你必须打开源代码并调整值，这很容易通过 flexbox 来实现，这是 bootstrap 4 使用的 【参考方案1】：您可以为单行中的 5 列创建自己的 css 类。 请使用媒体查询将此类仅应用于 xl 屏幕。
演示sn-p：
.col-20
width: calc(100% / 5);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Three equal width columns</h1>
<p>Note: Try to add a new div with class="col" inside the row class - this will create three equal-width columns.</p>
<div class="row">
<div class="col-20 col" style="background-color:lavender;">.col</div>
<div class="col-20 col" style="background-color:orange;">.col</div>
<div class="col-20 col" style="background-color:lavender;">.col</div>
<div class="col-20 col" style="background-color:orange;">.col</div>
<div class="col-20 col" style="background-color:lavender;">.col</div>
</div>
</div>
</body>
</html>【讨论】：
【参考方案2】：您是否单独尝试了col-lx 课程？它会根据您的需要自动适应，如下所示：
<div class="row mb-5">
<div class="col-xl col-lg-3 col-md-3 col-sm-6">
//Content
</div>
</div>
如果对你有帮助，请告诉我。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row mb-5">
<div class="col-xl col-lg-3 col-md-3 col-sm-6 bg-danger">
123
</div>
<div class="col-xl col-lg-3 col-md-3 col-sm-6 bg-warning">
123
</div>
<div class="col-xl col-lg-3 col-md-3 col-sm-6 bg-danger">
123
</div>
<div class="col-xl col-lg-3 col-md-3 col-sm-6 bg-warning">
123
</div>
<div class="col-xl col-lg-3 col-md-3 col-sm-6 bg-danger">
123
</div>
</div>【讨论】：
col 单独适用于所有屏幕，但与其他 col-*-* 类一起使用时，它仅适用于超小型设备 - 屏幕宽度小于 576 像素。参考以下链接：bootstrap grid
@AbhishekTewari 感谢您注意到这一点。我已固定为“col-lx”，这样它将按要求工作。以上是关于如何在引导网格上获得 5 个大小相等的列？的主要内容，如果未能解决你的问题，请参考以下文章
如何设置数据网格列以填充数据网格集以填充和布局自动调整大小的网格？