Twitter Bootstrap Fluid Grid系统嵌套与前一行不对齐

Question

我正在创建一个使用Twitter Bootstrap's Fluid Grid system的表单。一张图片胜过千言万语！

在第3行（ Paciente ）中，正在进行一些嵌套。如您所见，如果与前两行相比，此嵌套导致2列中的对齐方式不同。如果你看看橙色线，你可以发现......

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

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

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

---

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

Answer 1

你的标记比它应该更复杂。您需要的.row-fluids和.span$个类太多了。为什么不这么简单？

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

Answer 2

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

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

这肯定会增加额外的标记，但它可以保证你的外观相同。

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