为什么不建议嵌套流体容器？

Question

我使用 Bootstrap 来制作我的网站布局。在页面的内容中，有小部件。这些小部件有自己的 div、table、span 等结构，并且不使用 bootstrap 来定位自己。其中一些小部件有一个模板来显示数据。我想在该模板中使用引导程序。

当我这样做时，它实际上工作得很好，但在文档中明确写到不要嵌套容器。为什么？

http://jsbin.com/xokodonajo/1/

如您所见，如果不嵌套容器，我的行将超出其父级。这通常通过容器中的等效填充来解决。

我应该忽略警告吗？警告仅意味着直接嵌套吗？从长远来看，我会遇到麻烦吗？

Answer 1

我认为它可能过于复杂。这应该是你所需要的。

<div class="container-fluid" style="border:2px solid red">
  <div class="row" style="border:2px solid yellow">
    <div class="col-sm-12" style="border:2px solid green">
      <!-- Some Widget -->
      <div class="kendo-grid" style="border:2px solid pink">
        <div>This is a widget</div>
        <div>Widget Templated Data</div>
      </div>
    </div>
  </div>
</div>

我不熟悉kendo-grid 的输出，但如果它只是一个<div>，您只需将它放在col-*-* 类中，使其在container-fluid 中正确对齐。查看此 Bootply 以了解我在说什么。

Bootply Example

关于嵌套 container 类的主题，这是可能的，但如果您按预期使用 row 和 col-*-* 类，则不是必需的。

希望有帮助！

编辑

另一种选择是将Widget Template Data 添加到另一行，如下所示：

<div class="container-fluid" style="border:2px solid red">
  <div class="row" style="border:2px solid yellow">
    <div class="col-sm-12" style="border:2px solid green">
      <div class="kendogrid" style="border:2px solid pink">
        <div>This is a widget</div>
      </div>
    </div>
  </div>
  <div class="row" style="border:2px solid yellow">
    <div class="col-sm-12" style="border:2px solid green">
      <div style="border:2px solid pink">
        <div>Widget Templated Data</div>
      </div>
    </div>
  </div>
</div>

还有更新 Bootply：

Bootply