Question

之一：

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

2

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

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

Answer 1

根据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>

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

Answer 2

1.如果你需要连续多个.col-，那么你可以写成以下内容。

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

2. if you need to divide  `.col-` in more `.col` then

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

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

2 个答案: