CSS Twitter bootstrap 3 表单水平和单行多个输入列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23581571/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap 3 form-horizontal and multiple input columns on single line
提问by suricactus
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-errorclass.
我通过将多个输入分组为 single 来做到这一点form-group，但这样我就不能使用has-errorclass.
<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?
那么form-group每个输入框可以有多个's 吗？
采纳答案by Sephy
To align easily things in bootstrap 3, You should use the Grid System.
Here is a fiddleclose to your needs :
要在引导程序 3 中轻松对齐，您应该使用Grid System。
这是一个接近您需求的小提琴：
<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.
对齐方式取决于屏幕的宽度，因此请务必根据您的需要对其进行适当调整。然后你可以自己设置输入的样式。
回答by Zim
You need to wrap the inputs in their own col-*classes like this..
您需要col-*像这样将输入包装在他们自己的类中..
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Quarter</label>
<div class="col-md-10">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Address</label>
<div class="col-md-8">
<input type="text" class="form-control">
</div>
<label class="control-label col-sm-1">Addr. №</label>
<div class="col-md-1">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Block name/Number</label>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
<label class="control-label col-sm-1">Entrance</label>
<div class="col-md-1">
<input type="text" class="form-control">
</div>
<label class="control-label col-sm-1">Floor</label>
<div class="col-md-1">
<input type="text" class="form-control">
</div>
<label class="control-label col-sm-1">Apartment</label>
<div class="col-md-1">
<input type="text" class="form-control">
</div>
</div>
</form>
Also, there is no col-sm-15or col-sm-20in Bootstrap
此外，Bootstrap 中没有col-sm-15或col-sm-20
