twitter-bootstrap - 可以使用 Bootstrap mixins 将单个 div 既作为容器又作为行吗？

Question

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

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

在我们的项目中，我们使用 LESS 和 mixin 以及语义类，因此通常看起来像:

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

上面已经清楚地说明了发生了什么。 .make-row()(甚至是 .row)中的 margin-left 和 margin-right 属性) 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