Twitter bootstrap 3形式 - 单行的水平和多个输入列 [英] Twitter bootstrap 3 form-horizontal and multiple input columns on single line
本文介绍了Twitter bootstrap 3形式 - 单行的水平和多个输入列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要在单行中放置多列输入，如下所示：
我通过将多个输入分组在单个 form-group ，但是这种方式我不能使用 has-error 类。
< div class =form-group>
< label class =control-label col-sm-4>季度< / label>
< input type =textclass =col-sm-20/>
< / div>
< div class =form-group>
< label class =control-label col-sm-4>地址< / label>
< input type =textclass =col-sm-15/>
< label class =control-label col-sm-2>地址。 №< / label>
< input type =textclass =col-sm-3/>
< / div>
< div class =form-group>
< label class =control-label col-sm-4>块名称/号码< / label>
< input type =textclass =col-sm-5/>
< label class =control-label col-sm-2> Entrance< / label>
< input type =textclass =col-sm-3/>
< label class =control-label col-sm-2> Floor< / label>
< input type =textclass =col-sm-3/>
< label class =control-label col-sm-2>公寓< / label>
< input type =textclass =col-sm-3/>
< / div>
所以可以有多个 form-group
这是一个 fiddle 接近您的需求：
< body&
< form class =form-horizontal>
< div class =row>
< div class =form-group>
< label class =col-sm-2>季度< / label>
< div class =col-sm-10>< input type =textclass =form-control/>< / div&
< / div>
< / div>
< div class =row>
< div class =form-group>
< label class =col-sm-2>地址< / label>
< div class =col-sm-5>< input type =textclass =form-control/>< / div&
< / div>
< div class =form-group>
< label class =col-sm-2>地址。 №< / label>
< div class =col-sm-3>< input type =textclass =form-control/>< / div>
< / div>
< / div>
< div class =row>
< div class =form-group>
< label class =col-sm-2>块名称/号码< / label>
< div class =col-sm-1>< input type =textclass =form-control/>< / div>
< / div>
< div class =form-group>
< label class =col-sm-1> Entrance< / label>
< div class =col-sm-1>< input type =textclass =form-control/>< / div>
< / div>
< div class =form-group>
< label class =col-sm-1> Floor< / label>
< div class =col-sm-1>< input type =textclass =form-control/>< / div>
< / div>
< div class =form-group>
< label class =col-sm-2>公寓< / label>
< div class =col-sm-3>< input type =textclass =form-control/>< / div>
< / div>
< / div>
< / form>
< / body>
对齐方式取决于屏幕宽度，因此请务必根据您的需要进行调整。然后您可以自己设置输入样式。
I need to place multiple columns of inputs in single line like this:
I did this by grouping multiple inputs in single form-group, but this way I can't use has-error class.
<div class="form-group">
<label class="control-label col-sm-4">Quarter</label>
<input type="text" class="col-sm-20" />
</div>
<div class="form-group">
<label class="control-label col-sm-4">Address</label>
<input type="text" class="col-sm-15" />
<label class="control-label col-sm-2">Addr. №</label>
<input type="text" class="col-sm-3" />
</div>
<div class="form-group">
<label class="control-label col-sm-4">Block name/Number</label>
<input type="text" class="col-sm-5" />
<label class="control-label col-sm-2">Entrance</label>
<input type="text" class="col-sm-3" />
<label class="control-label col-sm-2">Floor</label>
<input type="text" class="col-sm-3" />
<label class="control-label col-sm-2">Apartament</label>
<input type="text" class="col-sm-3" />
</div>
So is it possible to have multiple form-group's for each input box?
解决方案
To align easily things in bootstrap 3, You should use the Grid System.
Here is a fiddle close to your needs :
<body>
<form class="form-horizontal">
<div class="row">
<div class="form-group">
<label class="col-sm-2">Quarter</label>
<div class="col-sm-10"><input type="text" class="form-control" /></div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-2">Address</label>
<div class="col-sm-5"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-2">Addr. №</label>
<div class="col-sm-3"><input type="text" class="form-control" /></div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-2">Block name/Number</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-1">Entrance</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-1">Floor</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-2">Apartament</label>
<div class="col-sm-3"><input type="text" class="form-control" /></div>
</div>
</div>
</form>
</body>
The alignment depends on the width of the screen so be sure to tune it properly to your needs. Then you can style the inputs themselves.
这篇关于Twitter bootstrap 3形式 - 单行的水平和多个输入列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
