Bootstrap 3 中的嵌套行不尊重网格？答案

【问题标题】：Nested rows in Bootstrap 3 fail to respect the grid?Bootstrap 3 中的嵌套行不尊重网格？
【发布时间】：2016-08-21 03:15:13
【问题描述】：

一旦您进入嵌套行，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 实际上不会让您尊重网格是否正确？还是我做错了？

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

【问题讨论】：

我认为这与 Bootstrap 是基于百分比的有关。因此，在您的顶级列中，col-X-1 是所有可用宽度的 8.3333%。那么内部级别是行的 8.333%，即总宽度的 83.34%。所以你的 col-X-1 不再是总宽度的 8.3333%，而是 83.34% 的 8.333%
我认为你是对的。但这意味着（除非您使用自定义选项，转到大量列并计算它）复杂的嵌套将无法与您的网格对齐。这是网格的全部点，不是吗？也许我过于规范或试图实现过于复杂的嵌套。（我实际上想让表格列尊重网格。）
Gleb 有一个很好的答案。您仅限于以整数结尾的比例，而不是分数。这样，您将能够完成完美对齐的网格。 nateroling.com/2014/12/15/aligning-nested-grids

标签： css twitter-bootstrap grid-layout

【解决方案1】：

1) 选择比例

嵌套行也使用 12 列的网格。所以你让 Bootstrap 从10 parent columns 中获取5/12。但这是一个小数。因为这个列边界彼此不重合。

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

4/12 来自 9 parent columns 正是 3 parent columns
来自8 parent columns 的3/12 正是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>

【讨论】：

太棒了。谢谢！很高兴我没有错过关于 Bootstrap 使用的错误 :) 我现实生活中的问题有点复杂，但我必须简化。我当前的非响应式网格在整个 24 列网格内的 22 列主区域内有 1 列宽的表格列。有时这些表嵌套在其他列中！为了用整数数学支持这一点，我必须为主网格增加 168 列，并在 144 列内容区域周围有 2x12-col 边距。矫枉过正！我会尝试将我的边距从网格边缘移开，并制作一个更简单的 24 列。再次感谢！

【解决方案2】：

另一种方法是不要将 Bootstrap 用于您的网格系统。

http://shelvesgrid.org/ 的三大卖点之一是，“货架是唯一的流体网格，其中嵌套的列与网格对齐，无论你走多深。”

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

例如在这种情况下（假设有 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% }

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

让网格“一直向下”工作是一个非常巧妙的技巧，因此第 2 列始终表示网格的 2/12，并且在嵌套后不会改变其含义（并破坏网格） .

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

【讨论】：