Html 以 bootstrap 3 水平形式组合输入组和表单组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21171322/
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
combine input-group and form-groups in bootstrap 3 horizontal form
提问by Thuurke
I made a jsfiddle with 3 input elements: http://jsfiddle.net/zb4dc/1/
我用 3 个输入元素制作了一个 jsfiddle：http: //jsfiddle.net/zb4dc/1/
As you can see they do not align well. How can this be done?
正如你所看到的，它们并没有很好地对齐。如何才能做到这一点？
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputfield1" class="col-sm-2 control-label">Input 1</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
</div>
</div>
<div class="form-group">
<label for="inputfield2" class="col-sm-2 control-label">Input 2</label>
<div class="controls">
<div class="input-group">
<input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
<div class="form-group">
<label for="inputfield3" class="col-sm-2 control-label">Input 3</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield3" placeholder="Input 3">
</div>
</form>
回答by Ranveer
You just forgot a col-sm-10in the second input field. Here's your corrected code:
您只是col-sm-10在第二个输入字段中忘记了 a 。这是您更正后的代码：
<body>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputfield1" class="col-sm-2 control-label">Input 1</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
</div>
</div>
<div class="form-group">
<label for="inputfield2" class="col-sm-2 control-label">Input 2</label>
<div class="col-sm-10 controls">
<div class="input-group">
<input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
<div class="form-group">
<label for="inputfield3" class="col-sm-2 control-label">Input 3</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield3" placeholder="Input 3">
</div>
</div>
</form>
</div>
</body>
Fiddle: http://jsfiddle.net/zb4dc/2/
