一:
<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>
解决方法
根据
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>
如果您只想要一个全宽度元素,则不需要使用网格布局和/或可以删除一个级别的嵌套.