Question

Bootstrap 3 文档说：

必须将行放在.container内才能正确对齐和填充。

这是否意味着他们的一个祖先应该是一个容器，或者他们的直系父母应该是一个容器？</ p>

看过这些例子，我认为前面的解释是正确的，因为容器具有特定显示尺寸的固定宽度：

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

因此，它们不能放在其他组件内（例如.panel-body s）。

换句话说，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。

正如文档中提到的那样，您的代码是正确的：

请注意，由于填充和固定宽度，容器不是可以嵌套。

有关行必须在.container内的原因的一些信息。

行有margin-left: -15px; margin-right: -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

Answer 2

.container类负责其子级的填充和边距。因此，除非被覆盖，否则放在容器中的任何内容都会继承这些属性。这里没有什么不寻常的事情。

请查看source以获取更多信息：

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

在Bootstrap中行是否需要直接父级？

2 个答案: