可以使用 Bootstrap mixins 使单个 div 既是容器又是行？

Question

在 Bootstrap 的网格系统中，创建“行”的标准方法是使用如下标记：

<div class="container">
    <div class="row">
       ... columns here ...
    </div>
</div>

在我们的项目中，我们使用 LESS 和 mixins 以及语义类，所以这通常看起来像：

<div class="content-wrapper">
    <div class="content">
       ...
    </div>
</div>

// LESS:
.content-wrapper {
    .container;
}

.content {
    .make-row();
}

但是，这两个 DIV 是人为的，实际上，从语义的角度来看，我只需要一个 DIV。在 Bootstrap 中，有没有办法让它只与包含 DIV 的单个文件一起工作？显然这样的事情是行不通的：

#content {
    // doesn't work
    .container;
    .make-row();
}

Answer 1

你没有解释，什么在你的情况下不起作用。

当你检查编译后的 CSS 代码时，你会发现：

#content {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: -15px;
  margin-right: -15px;
}

上面清楚地说明了会发生什么。 margin-left 和 margin-right 来自您的 .make-row()（甚至是 .row）mixins 的属性覆盖了 .container 的 margin-left 和 margin-right 属性，它们使您的网格居中。

当您了解为什么 .row 会增加负边距时，您应该考虑是否确实需要它。负边距在nesting 中起作用。由于.container 每边有15 个像素的填充（并且Bootstrap 使用border-box），.row（和列）变得小于.container 本身（负边距使它们具有相同的宽度）。当您嵌套新行时，其宽度变为 1 / x *（容器的宽度 - 容器的填充）。

根据你的需要，你可以考虑跳过.container的行和填充：

#content {
    .container;
    padding-left: 0;
    padding-right: 0; 
}

可能的相关：

1. Bootstrap 3 Gutter Size
2. How to change gutter widths on Responsable CSS Grid