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

Question

该引导3文档说:

必须将行放置在.container适当的对齐和填充内.

这是否意味着他们的一个祖先应该是一个容器,还是他们的直系父母应该是一个容器？

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

@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.

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

请注意,由于填充和固定宽度,容器默认情况下不可嵌套.

关于为什么行需要在里面的一些信息.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必须抵消行上负边距的父级(这将导致容器离开屏幕并导致滚动条).

该演示显示了上述两种情况.

Answer 2

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

查看来源以获取更多信息：

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