将容器类嵌套在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>

Bootply上的示例

Answer 1

在研究了这个问题之后,我想我对这个问题有了一个很好的答案.根据我的发现,似乎Bootstrap文档和Bootstrap网站上的示例与容器类无法嵌套的建议相矛盾.这也在回购中得到承认.所以看起来文档中有关嵌套容器和由嵌套容器引起的填充问题的建议是这个问题的唯一真正问题,因为我没有发现它的其他问题.

在回购中,我找到了另一种可能的解决方案,建议在嵌套容器上改变边距.但我认为,如初始问题所述,我将子容器填充归零的解决方案更加实用和直接,因为不需要额外的标记来实现所需的效果.我将在此处包含来自回购的边距解决方案以供参考.它主要涉及向父容器添加固定类,然后在父容器中的每个嵌套容器上应用负左右边距.请注意,此解决方案不适用于嵌套在容器流体中的容器实例.仅限于嵌套在其他容器中的容器.

集装箱内装的集装箱

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;
}

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>

Bootply上的示例

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