Question

我终于对bootstraps网格系统越来越熟悉，但我仍然对一些事情感到困惑。

我从他们的文档中知道他们说容器不可嵌套：

Bootstrap需要一个包含元素来包装网站内容并容纳我们的网格系统。您可以选择在您的项目中使用两个容器中的一个。请注意，由于填充等原因，两个容器都不可嵌套。

但这究竟意味着什么？它们似乎对我来说是可以嵌套的，除了每次嵌套容器时，左边和右边都会有额外的15px边距填充。（正如我所料）。

当他们说可嵌套时，他们是否意味着直接父/子可以嵌套？

我创造了一个我制作的布局的小提琴。布局使用容器来创建初始主体结构。然后我有一个带有 renderbody 类的div来设置背景颜色等。最后我有一个div，其中包含类 renderbody-inner ，宽度为95％，margin：auto创建一个居中的身体区域，左右两侧的排水沟。

这让我有一个问题：我应该在 renderbody-inner 中使用容器/容器流体，以便我可以使用col- * s？最外面的容器现在是无用的，因为我填充了具有基于％的宽度的div？

^此示例是技术上嵌套容器，但它们不是直接父/子。这让我很困惑。我意识到，在一天结束时，我可以做我想做的事。但我正在尽力遵循文档/最佳实践。

 <div class="container">
    <div id="renderbody">
        <div id="renderbody-inner">
            <div class="container-fluid">
              <!--Rendering body content here-->
              <div style="height:200px; background-color:darkgrey">

              </div>
            </div>
        </div>
    </div>
</div>

编辑：这与Multiple and/or nested Bootstrap containers?

不重复

该问题的答案通过提供我在问题中提供的确切引用来回答它。他们没有回答我的问题为什么？或提供解释。（这就是我要问的）

Answer 1

不要这样做。一个更好的问题可能是你想要首先嵌套它们的原因。

容器响应具有固定宽度的媒体查询。 Bootstrap中的其他所有内容都使用百分比，该百分比从此初始固定宽度开始下降。当你使用2时，你会引入一堆奇怪的效果，比如你注意到的填充和水平滚动。您可以尝试使用CSS黑客撤消这些内容，但这会让我们回到这样的问题：为什么首先要这样做？

我认为你可能正在努力的是从典型的HTML / CSS过渡到网格模型，它希望你总是这样工作：

body
  container
    row
      col
        row
          col

等等，通常你会喜欢一些中间非Bootstrap标签。你可以使用这个类来适应这个：

.box {
  float: left;
  width: 100%;
}

这样你的代码示例就可以这样工作：

<div class="container">
    <div id="renderbody" class=box>
        <div id="renderbody-inner" class=box>
            <div class="row">
                <div class="col-sm-6">Test</div>
                <div class="col-sm-6">Test</div>
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/b9chris/vdh8stnd/

Bootstrap网格系统容器/嵌套

1 个答案: