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。所以看起来文档中有关嵌套容器和由嵌套容器引起的填充问题的建议是这个问题的唯一真正问题，因为我没有发现它的其他问题。

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

装在容器中的容器

<强> 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

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

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

1 个答案: