为什么form-group偏移行?

时间:2014-12-18 00:21:43

标签: css3 twitter-bootstrap

我在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>

删除表单组后,如http://jsfiddle.net/1kL4tfux/所示,问题就会消失。

有没有办法在此上下文中使用form-group而不会影响对齐?

1 个答案:

答案 0 :(得分:1)

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

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

  

需要自定义宽度

     

输入和选择的宽度为:100%;适用于   默认在Bootstrap中。在内联表单中,我们将其重置为宽度:   汽车;所以多个控件可以驻留在同一行上。取决于   你的布局,可能需要额外的自定义宽度。

所以你可以这样做吗? http://jsfiddle.net/7723q8kr/1/