Question

我在bootstrap中发现了一些关于.row类的例子和一些矛盾的事情。是不是更好

A）

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

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

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

或

b）中

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

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

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

或者没关系？

Answer 1

额外的.row是不必要的。正如它在BS docs中所说的那样，当你有超过12个时，会强制额外的列进行换行，从而创建一个新的可见行..

来自Bootstrap docs ..

＆＃34;如果在一行中放置了超过12列，则每组都有额外的列将作为一个单元包裹到一个新行上。＆＃34;

您只需要注意，如果您的列内容的高度不同，您应该使用responsive resets来清除＆＃34;这些列使它们均匀包裹。

clearfix重置示例： http://www.bootply.com/C4BMA2nDth

Answer 2

使用Bootstrap网格的最佳方法是利用LESS / Sass mixins。查看Bootstrap 4 mixins以使用网格： https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss

它们与Bootstrap 3 Sass完全不同，这就像你在上面尝试的那样。

较新的网格使用Flexbox而不是大小的浮动。 Bootstrap本身还没有发布4.x系列bootstrap的官方文档，所以目前还没有建立使用网格的最佳实践。

对于Bootstrap 3，我通常在我的项目中设置一个scss partial，看起来像这样：

// This sets up a row in your markup
.content-row {
  @include make-row();
}

// This sets up a 10 column element with a one column offset 
// For all screens up 1200px, after that it's an 8 col grid
.content-standard {
  @include make-sm-column(10);
  @include make-sm-column-offset(1);
  @include make-md-column(10);
  @include make-md-column-offset(1);
  @include make-lg-column(8);
  @include make-lg-column-offset(2);
}

然后，您可以非常轻松地将网格应用到标记中，而不会让所有.col-md-8类混乱。它看起来像这样：

<section class="content-row">
  <div class="content-standard">
  </div>
</section>

在bootstrap 4中使用.row太多了

2 个答案: