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

前端之家收集整理的这篇文章主要介绍了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相关文章