我在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而不会影响对齐?
答案 0 :(得分:1)
Bootstrap中的任何col
类div都应用了一个浮点数。但是form-group
是一个block
元素,默认情况下会占用100%的宽度。它还有一个margin-bottom
属性,可以推动下一个div。这会导致表单组项目堆叠(这是它的目的)。
您可以将它们包装在form-inline
元素中。但是您丢失了一些格式,因此您需要指定form-group
的宽度。正如Bootstrap文档所说:
需要自定义宽度
输入和选择的宽度为:100%;适用于 默认在Bootstrap中。在内联表单中,我们将其重置为宽度: 汽车;所以多个控件可以驻留在同一行上。取决于 你的布局,可能需要额外的自定义宽度。
所以你可以这样做吗? http://jsfiddle.net/7723q8kr/1/