2

我正在创建一个使用Twitter Bootstrap 的流体网格系统的表单。一张图片胜过千言万语！

在此处输入图像描述

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

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

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

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

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

4

2 回答 2

3

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

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

于 2013-02-03T01:53:16.413 回答
2

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

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

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

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

于 2013-02-03T01:44:02.703 回答