Bootstrap网格系统：不包含数字的列类

Question

为什么我可以使用不包含cols数的引导类类，以及它是如何解释的？例如。在代码片段中

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

第二个内部div使用col类，这些类在尺寸上对应于第一个内部div的col类。这是什么意思？

Answer 1

据我所知col类已引入Bootstrap 4.此类可行，因为Bootstrap 4使用display:flex来布局内容而不是经典float:left。使用flexbox，您不必为每列明确定义宽度。如果.row包含两个cols，则cols占据.row的宽度的50％，如果三个宽度等于33.3333％宽度等等。查看关于CSS Tricks的优秀文章，详细了解flexbox。