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

Question

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

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

• 重建我的 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>

Answer 1

我建议使用自动布局col-lg列的宽度较大，这样就可以有5跨，然后缩小到标准尺寸的网格列md，sm等等。

Bootstrap 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