Html 在 Bootstrap 3 中对齐输入并选择彼此相邻
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22601121/
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
Aligning input and select next to each other in Bootstrap 3
提问by Satish
I have this code snippet, but this renders dropdown after line break, What's the best bootstrap 3 col class to get it correct? (select dropdown next to input medium-inline)
我有这个代码片段，但这会在换行符后呈现下拉列表，最好的引导程序 3 col 类是什么？（选择 input medium-inline 旁边的下拉菜单）
<form class="form-horizontal well" >
<div class="form-group">
<label class="col-lg-2 control-label">Memory</label>
<div class="col-lg-4">
<div>
<input id="memory" type="text" class="form-control">
</div>
<div class="col-lg-4">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</div>
</div>
</form>
回答by hutchonoid
Ok, this is how I would do it.
好的，这就是我要做的。
First add the form-inlineclass to your form.
首先将form-inline类添加到您的表单中。
Then remove the col-lg classes from labels and inputs.
然后从标签和输入中删除 col-lg 类。
Also remove all un-needed divs too, which results in the below html:
还要删除所有不需要的 div，从而生成以下 html：
Markup
标记
<form class="form-inline well" >
<div class="form-group">
<label class="control-label">Memory</label>
<input id="memory" type="text" class="form-control">
</div>
<div class="form-group">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</form>
Screen grab
屏幕抓取
回答by Taryn East
If you want your form-fields to align horizontally - you can actually use the inline form. eg:
如果您希望表单域水平对齐 - 您实际上可以使用内联表单。例如：
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="memory">Memory</label>
<input id="memory" type="text" class="form-control">
</div>
<div class="form-group">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</form>
Note: not tested in an actual browser...
注意：未在实际浏览器中测试...
