html - Bootstrap 中的行是否需要直接父级？

Question

Bootstrap 3 文档说:

Rows must be placed within a .container for proper alignment and padding.

这是否意味着它们的祖先之一应该是容器，或者它们的直接父代应该是容器？

看过示例后，我认为前一种解释是正确的，因为容器具有针对特定显示尺寸的固定宽度:

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
  ...
}

因此它们不能放置在其他组件中(例如 .panel-bodys)。

换句话说，Bootstrap 3 中的以下标记是否正确？

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Title</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-xs-6">
                Col 1
            </div>
            <div class="col-xs-6">
                Col 2
            </div>
        </div>
    </div>
</div>  

Answer 1

这意味着他们的祖先之一应该是一个.container。

正如文档所述，您的代码是正确的:

Note that, due to padding and fixed widths, containers are not nestable by default.

关于为什么行需要在 .container 中的一些信息。

行有 margin-left: -15px;右边距:-15px。那是因为行应该只包含列，例如col-md-12，这些列有 padding-left: 15px; padding-right: 15px.因此，行上的负边距意味着有效的列将与网格边缘“齐平”。

因为那个负边距，你需要有 .container 因为它有 padding-left: 15px; padding-right: 15px;.否则，您的行将离开页面。

全宽设计

当然，如果您确实将所有内容都包装在 .container 中，那么您将拥有固定的宽度，这并不适合所有人。所以，如果你不想这样，你可以违反 Bootstrap 的规则，将你的 rows 放在具有 padding: 0 15px 的父级中以抵消行上的负边距(这会导致容器离开屏幕并导致滚动条)。

This demo shows both situations described above .