共计 1925 个字符，预计需要花费 5 分钟才能阅读完成。
一、问题
bootstrap3 中的栅格零碎大抵是：container 容器中每行 12 个单位格子，能够依据理论状况自在的设置列，如下图所示，第一行均等的分了 12 列，第二行非均等分了 2 列（两列的格子数之和为 12），第三行均等的分了 3 列，第四行均等的分了 2 列。
当然，依据须要，还能够把一行均等的分为 4 列（每列 3 个格子）、6 列（每列占据 2 个格子）。
问题来了，如果我想均等的分为 5 或 7 或 8 或 9 列等。。。怎么办。这里的问题是均等的调配列的宽度，每一列宽度雷同。
当然，对于以上问题能够不应用 bootstrap 的栅格零碎，自定义浮动布局，设置每列的宽度百分比，同样可能解决简单的问题，但我不想钻研这种根底问题，只想把框架利用率晋升到最高。
基于以上问题，我尝试在 bootstrap4 中找到答案。
二、bootstrap4
更全的技术细节参考官网文档
参考地址：https://getbootstrap.com/docs/4.5/
1、响应式布局容器
以.container-lg为例，当屏幕宽度小于 960px 的时候，容器会占满屏幕宽度，全屏显示，此时成果等同.container-fluid。
2、栅格零碎
bootstrap4 更加灵便自在，能够轻而易举的解决问题中遇到的瓶颈。bootstrap4 的栅格零碎继承了前一个版本的大部分内容，同时进行了大量的优化。上面是一个一行 5 个等宽列的例子：
<div class="container">
<div class="row">
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
</div>运行后果：
bootstrap4 会依据行内 col 的数量（最多 12）计算每列的宽度所占百分比，进行均分，这就意味着一行中能够呈现 12 以内（包含 12）的所有可能列数。超出 12 局部的 col, 主动进入下一行，并均分下一行的宽度。如下图所示
想要主动每行 5 列怎么办？
等宽多行
通过插入.w-100 来创立逾越多行的等宽列，在该行中您心愿列换行到新行。
<div class="container">
<div class="row">
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
<div class="w-100"></div>
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
<div class="w-100"></div>
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
<div class="col border border-primary">.col</div>
</div>显示后果
通过<div class="w-100"></div>，强制换行，就不会傻傻的 12 列挤在一起了。
另外：bootstrap4 预制了很多工具类，应用起来非常不便 https://getbootstrap.com/docs/4.5/utilities/
