css - 为什么表格组会偏移行？

Question

我在 Bootstrap 3 中使用 form-group。它导致了一些水平对齐问题。

这是我的意思的一个例子:http://jsfiddle.net/7723q8kr/ .注意第 3 列和第 4 列低于第 1 列和第 2 列。

<div class="container-fluid">
    <div class='row'>
    <div class="form-group">
    <div class="col-xs-3">Hi</div>
    <div class="col-xs-3">Hi</div>
        </div>
    <div class="form-group">
    <div class="col-xs-3">Hi</div>
    <div class="col-xs-3">Hi</div>
        </div>
</div>
<div class='row'>
    <div class="form-group">
    <div class="col-xs-3">Hi</div>
    <div class="col-xs-3">Hi</div>
    </div>
    <div class="form-group">
    <div class="col-xs-3">Hi</div>
    <div class="col-xs-3">Hi</div>
    </div>
</div>
<div class="row">
    <div class="form-group">
    <div class="col-xs-3">Hi</div>
    <div class="col-xs-3">Hi</div>
    </div>
    <div class="form-group">
    <div class="col-xs-3">Hi</div>
    <div class="col-xs-3">Hi</div>
    </div>
</div>
</div>

移除 form-group 时，如下所示 http://jsfiddle.net/1kL4tfux/ ，问题就消失了。

有没有办法在这种情况下使用 form-group 而不影响对齐？

Answer 1

Bootstrap 中的任何 col 类 div 都应用了一个 float 。但是 form-group 是一个 block 元素，默认情况下它会占据 100% 的宽度。它还有一个 margin-bottom 属性，可以将下一个 div 向下推。这会导致表单组元素堆叠(这是它的目的)。

您可以将它们包装在 form-inline 元素中。但是您丢失了一些格式，因此您需要指定 form-group 的宽度。正如 Bootstrap 文档所说:

Requires custom widths

Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

所以你可以做这样的事情吗？ http://jsfiddle.net/7723q8kr/1/