Question

我想在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

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

Answer 1

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

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

因此，嵌套在父col-md-9内的行＆gt; col有12个更小的列（不是9个更多）。因此，内部col-*-1将变得更窄，因为它消耗了col-md-9的8.333333％，小于外部容器的 8.333333％。

bootrap网格中的嵌套行

1 个答案: