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

Question

一个：

 <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 方法来减少加价吗？

Answer 1

根据 Bootstrap's own API documentation, when nesting columns，任何列 .col 都应嵌套在 .row 中。两者不应合并在一个元素上。

除了这在语义上更有意义之外 - 类影响的基础 CSS 属性依赖于此结构。

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

右（如果使用其他列以及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>

如果你只是想要一个全宽元素，你不需要使用网格布局and/or可以删除一层嵌套。

Answer 2

1.If你需要连续多个.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 类

Combining Bootstrap col and row classes on single element

html

css

twitter-bootstrap