html - 在 Bootstrap 3 的容器流体类中嵌套容器类？

Question

除了填充问题，为什么不建议将 .container 嵌套在 .container-fluid 中？

如果您将子容器的填充置零(如下面的代码所示)，效果与拥有一个容器是一样的。此外，如今使用不同的全宽和固定宽度布局似乎很常见。我知道文档说的是什么 ( LINK )，但我很好奇是否有人知道除了填充问题之外的任何其他问题，以保证不推荐此实现。是额外的标记还是我遗漏的其他东西？

我问的原因是我最近在许多网站上实现了这个，并且在我所做的测试中没有发现明显的问题。我想知道是否还有其他潜伏的潜在问题会促使我考虑停止这种做法。

CSS

.container-fluid .container {
    padding-left:0;
    padding-right:0;
}

HTML

<div class="container-fluid" style="background-color:aliceblue;">
    <div class="row">
        <div class="col-xs-12">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6" style="background-color:violet">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                    <div class="col-xs-6" style="background-color: lightblue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                </div>
            </div> 
        </div>
    </div>
    <div class="row">
      <div class="col-xs-4" style="background-color:pink">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
      <div class="col-xs-4" style="background-color: red">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
      <div class="col-xs-4" style="background-color:blue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
    </div>
</div>

Example on Bootply

Answer 1

经过研究这个问题，我觉得我对这个问题有了很好的回答。根据我的发现，似乎 Bootstrap documentation和 examples on the Bootstrap website与不能嵌套容器类的建议相矛盾。这是 acknowledged在 repo 协议(protocol)中也是如此。因此，文档中关于嵌套容器和由嵌套容器导致的填充问题的建议似乎是这个问题唯一真正关心的问题，因为我没有发现其他问题。

在 repo 协议(protocol)中我发现了另一个 potential solution建议更改嵌套容器的边距。但我认为我将子容器填充归零的解决方案(如这个初始问题中所述)更加实用和直接，因为不需要额外的标记来实现所需的效果。我将在此处包括 repo 协议(protocol)中的边距解决方案以供引用。它基本上涉及向父容器添加固定类，然后在父容器中的每个嵌套容器上应用负的左右边距。请注意，此解决方案不适用于嵌套在 container-fluid 中的容器实例。仅适用于嵌套在其他容器中的容器。

---

容器嵌套在容器中

HTML

<div class="container fixed">
  <div class="container">
    <div class="container">
      <div class="container"></div>
    </div>
  </div>
</div>

CSS

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

Example on Bootply

---

嵌套在容器流体中的容器

CSS

.container-fluid .container {
    padding-left:0;
    padding-right:0;
}

HTML

<div class="container-fluid" style="background-color:aliceblue;">
    <div class="row">
        <div class="col-xs-12">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6" style="background-color:violet">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                    <div class="col-xs-6" style="background-color: lightblue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                </div>
            </div> 
        </div>
    </div>
    <div class="row">
      <div class="col-xs-4" style="background-color:pink">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
      <div class="col-xs-4" style="background-color: red">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
      <div class="col-xs-4" style="background-color:blue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
    </div>
</div>

Example on Bootply

---

总而言之，虽然不推荐，但嵌套容器很容易，并且在正确的上下文中它实际上很有用，例如在布局具有不同的固定宽度和全宽内容的情况下。但必须仔细考虑和调整以解决嵌套容器引起的填充问题。