css - 引导网格系统：没有数字的列类

Question

为什么我可以在没有列数的情况下使用引导列类，这是如何解释的？例如在片段中

<div class="row row-header">
  <div class="col-12 col-sm-8">
  </div>
  <div class="col col-sm align-self-center">
  </div>
</div>

第二个内部 div 使用与第一个内部 div 的 col 类在维度上对应的 col 类。这是什么意思？

Answer 1

据我所知col，Bootstrap 4 中已经引入了课程。该课程之所以有效，是因为 Bootstrap 4 用于display:flex布局内容，而不是经典的float:left. 使用 flexbox，您不必为每列显式定义宽度。如果 a.row包含两个cols，则cols 占据 50% 的宽度.row，如果三个cols 则占据 33.3333% 的宽度，依此类推。查看这篇关于CSS Tricks的优秀文章，详细了解 flexbox。