将input-group
追加到form-inline
时,input-group
会在表单下方的“新行”中显示,而不是与其他控件内联。
这似乎是因为input-group
包装器类将display
设置为table
,而其他输入正常,其display
设置为{inline-block
1}}。当然,无法提供input-group
inline-block
显示,因为其子add-on
范围display: table-cell
,需要父级的属性才能正确对齐。
所以我的问题是:是否可以在内联表单中使用input-group
使用Bootstrap类?如果没有,那么允许使用自定义类的最佳解决方法是什么。
这是demo说明我的观点。代码如下:
<form action="" class="form-inline">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
<input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>
<div class="checkbox">
<label>
<input type="checkbox" /> and Checkboxes
</label>
</div>
<select class="form-control" style="width: 150px;">
<option>and Selects</option>
</select>
<button type="submit" class="btn btn-default">and Buttons</button>
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</form>
答案 0 :(得分:42)
这确实是一个错误并已解决(请查看issue on github以获取更多信息)。
从现在开始,BootStrap中的内联表单需要使用.form-group
包装子表单控件。
所以我的代码将成为:
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
</div>
...
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</div>
</form>
答案 1 :(得分:1)
我认为您可能需要将表单分成列以获得所需的内联布局。一个例子(我想你所追求的)是在Bootstrap网站here上。
尝试放
<div class="col-lg-1"></div>
在你的控件周围看看我的意思。您当然需要在12列中工作,因此需要相应调整。