Twitter Bootstrap 流体网格系统嵌套未与前一行对齐答案

【问题标题】：Twitter Bootstrap Fluid Grid system nesting not aligning with previous rowsTwitter Bootstrap 流体网格系统嵌套未与前一行对齐
【发布时间】：2013-01-18 01:48:37
【问题描述】：

我正在创建一个使用Twitter Bootstrap's Fluid Grid system 的表单。一图抵千言！

在第 3 行 (Paciente) 正在进行一些嵌套。如您所见，如果与前两行相比，这种嵌套会导致 2 列中的对齐方式不同。如果您查看橙色线，您会发现...

我在 JS Bin 设置了一个演示：http://jsbin.com/ayazul/1，使用的是最新的 Bootstrap 版本 2.2.2。

使用 Firebug 进行调试我在第二行/第二列的 <div class="span3"> 中看到 left-margin 和 30px。如果我手动将该值更改为20px，则列将正确对齐。

为什么前两行的左边距不同？

在Sherbrow 的帮助下，这是我想要的最终结果：http://jsbin.com/ayazul/29/（第二列在所有三行中对齐）

【问题讨论】：

尝试使用浏览器的开发工具查看标记，它应该会告诉您额外的填充/边距/等在哪里，如果有的话。
我确实做到了...这是 Bootstrap 的计算在使用流体嵌套时添加了不同的左边距。

标签： css twitter-bootstrap fluid-layout nested grid-layout

【解决方案1】：

为什么不在两行保留相同的结构span6 > span6，而不是在第一行保留span3，在第二行保留span6 > span6？

查看更新的 JSBin http://jsbin.com/ayazul/28/

这肯定会增加额外的标记，但它可以确保您具有相同的外观。

“为什么”很简单：流体列的边距（装订线）基于父总宽度。如果父级实际上是窗口宽度的.span6 (50%)，则它的值将小于其父级处于全窗口宽度的列。换句话说，嵌套的流体跨度会减小列实际像素宽度 - 仅适用于流体网格。

【讨论】：

非常好的舍布罗！ :) 你解释了一切！必须添加额外的标记不是问题……这是一项功能。呵呵

【解决方案2】：

您的标记比应有的复杂。你有太多的.row-fluids 和.span$ 类而不是需要的。为什么不这么简单？

http://jsbin.com/ayazul/6/

【讨论】：

您提供了一个不错且有效的替代方案，无需流体嵌套。谢谢 istos！