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 一：

<div >   <div >      <div >       .        .      </div>    </div> </div>

二：

<div >   <div >   .   .  </div> </div>

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

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

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

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

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

<div >   <div >      <div >       .        .      </div>    </div> </div>

错误：

<div >   <div >   .   .  </div> </div>

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

总结

以上是内存溢出为你收集整理的html – 在单个元素上组合Bootstrap col和row类全部内容，希望文章能够帮你解决html – 在单个元素上组合Bootstrap col和row类所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。