Html 在引导数据库4中使用.row太多

我在bootstrap中找到了一些关于.row类的例子和一些矛盾的东西。这样做更好吗

（a）

或

（b）

---

还是没关系？

使用引导网格的最佳方法是利用较少的/Sass混合。查看使用网格的Bootstrap 4 Mixin：

它们与，这就是你在上面尝试做的事情，有点不同

较新的网格使用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);
}

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

然后，您就可以非常轻松地将网格应用到标记中，而不必让所有那些

.col-md-8

类乱七八糟。它看起来像这样：

// 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);
}

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

---

不需要额外的

.row

。如中所述，当超过12列时，将强制换行，从而创建一个新的可见行

从引导文档中

如果一行中放置的列超过12列，则每组 额外的列将作为一个单元包装到新行上。”

您只需要知道，如果列内容的高度不同，则应使用“清除”列，以便它们均匀地包裹

clearfix重置示例：

---

没有比这更好的了。使用您需要的布局。