Bootstrap 3 中的嵌套行不符合网格？

Question

一旦进入嵌套行，

Bootstrap 似乎会破坏自己的网格。这是一个很好的例子：

div {
  border: 1px solid gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-1">col</div>
    <div class="col-xs-10">
      <div class="row">
        <div class="col-xs-5">nested col-xs-5</div>
        <div class="col-xs-7">nested col-xs-7</div>
      </div>
    </div>
    <div class="col-xs-1">col</div>
  </div>
</div>

我希望能够使 "nested xs-col-*" 列与顶部的 12 列完全对齐。如果我使内部类 col-xs-3/col-xs-7 （像包含的 col 一样加起来 10），它也不起作用。那只是在右边留下了一个缺口。

如果您使用奇数宽度，Bootstrap 进入嵌套行后实际上不会让您尊重网格，这样说对吗？还是我做错了？

在我看来，网格的全部意义在于事物应该对齐。如果我想要完美对齐，是否必须远离（重要的）嵌套行？

Answer 1

1) 选择比例

嵌套行也使用 12 列网格。所以你要求 Bootstrap 从 10 parent columns 中取出 5/12。但这是一个小数。由于此列边界彼此不重合。

选择列之间的比例。例如：

4/12 来自 9 parent columns 正好是 3 parent columns
3/12 来自 8 parent columns 正好是 2 parent columns

div {
  outline: 1px solid gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-1">col</div>
    <div class="col-xs-1">col</div>
    <div class="col-xs-1">col</div>
    <div class="col-xs-8">
      <div class="row">
        <div class="col-xs-3">nested 4</div>
        <div class="col-xs-9">nested 8</div>
      </div>
    </div>
    <div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-1">col</div>
    <div class="col-xs-1">col</div>
    <div class="col-xs-9">
      <div class="row">
        <div class="col-xs-4">nested 3</div>
        <div class="col-xs-8">nested 9</div>
      </div>
    </div>
    <div class="col-xs-1">col</div>
  </div>
</div>

2) 简化布局

您可以在没有嵌套列的情况下执行相同的操作：

div {
  outline: 1px solid gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-1">col</div>
    <div class="col-xs-3">3 columns</div>
    <div class="col-xs-7">7 columns</div>
    <div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-1">col</div>
    <div class="col-xs-4">4 columns</div>
    <div class="col-xs-6">6 columns</div>
    <div class="col-xs-1">col</div>
  </div>
</div>

Answer 2

另一种方法是不对您的网格系统使用 Bootstrap。

http://shelvesgrid.org/ 作为它的三大卖点之一，"Shelves is the only fluid grid where the nested columns line up the grid, no matter how deep you go."

这里使用的技巧是一直向下使用百分比宽度，但嵌套的百分比宽度知道它们是嵌套的。

例如在这种情况下（假设有 12 列网格）：

<div class="column-6">
    <div class="column-2"></div>
    <div class="column-2"></div>
    <div class="column-2"></div>
</div>

搁置应用 CSS，如下所示：

.column-2 { width: 16.6666667%; }
.column-6 { width: 50%; }
.column-6 .column-2 { 33.333333% }

后面更具体的规则会覆盖 column-2 宽度的基本定义，因此当嵌套在 .column-6 中时，它的大小与在顶层的大小相同。

拥有一个有效的网格是一个非常巧妙的技巧 "all the way down" 这样第 2 列总是表示你的网格的 2/12，并且一旦你嵌套。

（可悲的是，Shelves 使用边距作为列间距，而不是填充，这给我带来了问题，所以我最终使用上述技巧自行滚动。）

Bootstrap 3 中的嵌套行不符合网格？

Nested rows in Bootstrap 3 fail to respect the grid?

css

grid-layout

twitter-bootstrap

1) 选择比例

2) 简化布局