1

我在引导程序中发现了一些关于 .row 类的例子和一些矛盾的东西。这样做更好吗

一个）

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

还是没关系？

4

2 回答 2

1

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

从引导文档..

“如果在一行中放置超过 12 列，则每组额外的列将作为一个单元换行。”

您只需要注意，如果您的列内容高度不同，您应该使用响应式重置来“清除”列，以便它们均匀包裹。

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

于 2016-02-05T11:38:32.717 回答
0

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

它们与Bootstrap 3 Sass有很大不同，这就是您在上面尝试做的事情。

较新的网格使用 Flexbox 而不是大小浮动。Bootstrap 本身尚未发布 4.x 系列 bootstrap 的官方文档，因此实际上还没有确定使用网格的最佳实践。

对于 Bootstrap 3，我通常在我的项目中设置一个 scss 部分，如下所示：

// 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>
于 2015-12-24T23:50:02.943 回答