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属性会覆盖margin-left的{{1}}和margin-right属性以网格为中心。

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

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

.container

可能相关：

可以使用Bootstrap mixins将单个div作为容器和行吗？

1 个答案: