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>

我希望能够使“嵌套的xs-col- *”列与顶部的12个列完全对齐。如果我创建内部类col-xs-3 / col-xs-7（像包含col一样最多加10），它也不起作用。这只是在右边留下了一个空隙。

如果使用奇数宽度，一旦进入嵌套行，Bootstrap实际上不会让你尊重网格是否正确？或者我做错了吗？

在我看来，网格的重点是事物应该对齐。如果我想要完美对齐，我是否必须远离（非平凡的）嵌套行？

Answer 1

1）选择比例

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

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

4/12

9 parent columns正好是3 parent columns

3/12

8 parent columns正好是2 parent columns

＆＃13;

div {
  outline: 1px solid gray;
}

＆＃13;

<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>

＆＃13;

2）简化布局

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

＆＃13;

div {
  outline: 1px solid gray;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

http://shelvesgrid.org/作为其前三大卖点之一，＆＃34; Shelves是唯一一个嵌套列排列网格的流畅网格，无论你走得多远。＃34;

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

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

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

Shelves应用如下所示的CSS：

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

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

这是一个非常巧妙的技巧，可以让网格一直工作并且＃34;一直向下＆＃34;因此，第2列始终表示网格的2/12，并且在嵌套后不会改变其含义（并打破网格）。

（可悲的是，Shelves使用了边距之间的间距，而不是填充，这给我带来了麻烦，所以我最后使用上面的技巧来完成自己的操作。）

Bootstrap 3中的嵌套行无法尊重网格？

2 个答案:

1）选择比例

2）简化布局