html – 在单个元素上组合Bootstrap col和row类

一:

 <div class="row">
   <div class="col-md-12">
      <div class="row">
       . 
       .
      </div>
    </div>
 </div>

二:

 <div class="row">
   <div class="col-md-12 row">
   .
   .
  </div>
 </div>

两个实现是否相同?我可以使用2方法,以便我可以减少标记.

最佳答案
根据Bootstrap’s own API documentation,当nesting columns时,任何列.col应该嵌套在.row中.两者不应合并在一个元素上.

除了这在语义上更有意义的事实之外 – 两个类影响的底层CSS属性依赖于此结构.

另请注意,在单独使用col-md-12时,您实际上是在创建一个全宽度元素(无论如何都是行).在这种情况下,使用网格布局可能不相关,除非您有其他元素在不同的屏幕尺寸显示/发挥作用.

对(如果使用其他列以及col-md-12):

 <div class="row">
   <div class="col-md-12">
      <div class="row">
       . 
       .
      </div>
    </div>
 </div>

错误:

 <div class="row">
   <div class="col-md-12 row">
   .
   .
  </div>
 </div>

如果您只想要一个全宽度元素,则不需要使用网格布局和/或可以删除​​一个级别的嵌套.

转载注明原文:html – 在单个元素上组合Bootstrap col和row类 - 代码日志