引导网格中的嵌套行答案

【问题标题】：Nested rows in bootstrap grid引导网格中的嵌套行
【发布时间】：2018-11-11 18:24:30
【问题描述】：

我想在 Bootstrap 3.3.7 中创建一个网格，该网格嵌套在另一个父网格中。

这是 HTML：

父组件

<div>
  <div class="row">
    <div class="col-md-3 border">.col-md-3</div> // 
      <div class="col-md-9 border">
        <nested-app></nested-app> // should have 9 cols
    </div>
  </div>
</div>

嵌套组件 //应该有9列

<div class="row">
  <div class="col-md-1 border">.col-md</div>
  <div class="col-md-3 border">.col-md-4</div>
  <div class="col-md-4 border">.col-md-4</div>
  <div class="col-md-4 border">.col-md-4</div>
</div>

问题是嵌套组件中col-md-1的宽度与父组件中col-md-1的宽度不同。

here's an example

所以我的问题是如何在嵌套网格中制作与父网格相同宽度的列？

【问题讨论】：

标签： html css angular twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

列具有基于百分比的宽度，因此总是会消耗其包含行的一定百分比。

例如，col-*-1 是其父行宽度的 8.333333%。

因此，嵌套在父级 col-md-9 内的 row>col 有 12 个更小的列（而不是 9 个）。因此，内部的col-*-1 会变窄，因为它消耗了col-md-9 的 8.333333%，小于外部容器的 8.333333%。

【讨论】：