引导程序中的 5 个等宽列（容器的全宽）答案

【问题标题】：5 equal width columns in bootstrap (full width of container)引导程序中的 5 个等宽列（容器的全宽）
【发布时间】：2017-09-02 04:19:10
【问题描述】：

根据我的 psd 模板，我有 CONTAINER，它由 5 个等宽 (344px) 列组成。我决定在响应性方面使用引导程序。但现在我对这项任务感到沮丧。

有什么方法可以实现或者我需要：

重建我的 psd 模板以适应引导网格和大小
不使用引导程序和编写自定义响应类

代码笔： http://codepen.io/anon/pen/YZbBQG

<div class="cont">
        <div class="bicycles">
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
        </div>
    </div>

【问题讨论】：

他们不会响应吗？这将是一个 1720 像素宽的行？
@MichaelCoker 完全正确。我希望它具有响应性，因此当您缩小行列宽度时 - 1 行将包含 3-4 列，而不是 5 列，依此类推。
@Src 好的，刚刚更新了我的答案。这就是你想要的吗？
@MichaelCoker 这似乎是我要找的东西，但现在我遇到了一个问题：当您缩小浏览器窗口的宽度并越过断点时 - 在 4 列之后有一些可用空间。我可能需要将容器设置为 100% 的内容大小？
@Src 如果列是固定宽度，则在最后一列之后会有空格。你希望它如何表现？如果您能在发布问题之前弄清楚您需要什么，并确保您的帖子清楚地描述了您的最终目标，这将有所帮助。

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

【解决方案1】：

我建议使用自动布局 col-lg 列以获得更大的宽度，这样您就可以有 5 个跨度，然后在 md、sm 等上缩小到标准大小的网格列。

引导程序 4.6（2020 年更新）

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="w-100 d-none d-lg-block">
           <!--force wrap every 5 on lg-->
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
    </div>
</div>

注意：这将允许列均匀增长以填充行的宽度。在列内容强制宽度的极少数情况下（例如包含固定宽度图像或非换行文本的列），请使用min-width:0 强制相等的列宽度，而不管其内容如何。

.col-lg {
    min-width: 0;
}

http://codeply.com/go/DVzExqdUZa

【讨论】：

我可以在这种布局中使用自定义列宽吗？或者我应该只使用没有引导程序的 flexbox 来处理这种事情？
Bootstrap 4 是 flexbox，所以我认为不需要自定义类。
这不应该是公认的答案，因为它仍然将 flex-grow 属性设置为 1，这将使它们根据内容大小变小或变大。
@ShashankBhatt 显然 OP 认为这是正确的答案，因为它们的列内容大小相似。使用 flex-grow: 1 列不会填充宽度，因此您的批评无效。这是一个更广泛的 flexbox 问题，之前已解决，并强制设置等宽 min-width: 0。当您的推理模糊、主观并且基于超出 OP 问题范围的边缘案例时，我建议不要投反对票。
@zim 感谢您更新代码。它现在被赞成了。

【解决方案2】：

使用 bootstrap 4 很容易。您只需要在列上添加一个 flex 行来定义自定义宽度。

.row > .col {
  flex: 0 0 344px;
  background: #eee;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
  </div>
</div>

【讨论】：

【解决方案3】：

您也可以使用 Flexbox。我建议您使用 1200px 或以下作为最大容器宽度。

<div class="container">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
</div>

.container{

    display: flex;
    width: 1720px;

}

【讨论】：

【解决方案4】：

您可以“以正确的方式”自定义您的引导程序版本。此页面的链接可让您自定义很多设置，包括网格列数。

http://getbootstrap.com/customize/

【讨论】：