如何在引导网格上获得 5 个大小相等的列？答案

【问题标题】：How to get 5 columns of equal size on bootstrap grid?如何在引导网格上获得 5 个大小相等的列？
【发布时间】：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 使用的

标签： css twitter-bootstrap bootstrap-4 flexbox css-grid

【解决方案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”，这样它将按要求工作。