Question

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

当我这样做时它实际上是完美的，但它在文档中清楚地写入了不要嵌套容器。为什么呢？

正如您所看到的，如果没有嵌套容器，我的行将超出其父级。这通常通过容器中的等效填充来抵消。

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

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

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

1 个答案: