Html Bootstrap 3：如何创建带有选择和标签的内联表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19775344/
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
Bootstrap 3: how to create an inline form with selects and labels?
提问by Jason
My labels keep appearing above the selects. I want them all on the same line. Pls see the jsfiddle: http://jsfiddle.net/jjgelinas77/9nL9x/
我的标签一直出现在选择上方。我希望他们都在同一条线上。请看 jsfiddle：http: //jsfiddle.net/jjgelinas77/9nL9x/
<div class="well well-sm">
<form name="myForm" role="form" novalidate="novalidate" class="form-inline">
<div class="form-group">
<label>C-Band</label>
<select id="cband" class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
<label>C-Band</label>
<select ng-model="form.cband2" id="cband2" class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option value="Other">Other</option>
</select>
</div>
<button class="btn btn-primary">Filter</button>
</form>
</div>
回答by ryantdecker
There's a CSS rule in bootstrap that sets the width of .form-controlto 100% on small screen sizes. So even when it's floated, it will take the whole width and therefore start on a new line. Good news is you only need a couple lines of CSS to override it:
bootstrap 中有一个 CSS 规则，它.form-control在小屏幕尺寸上将宽度设置为 100%。所以即使它是浮动的，它也会占据整个宽度，因此从一个新行开始。好消息是你只需要几行 CSS 来覆盖它：
.form-control {
width:auto;
display:inline-block;
}
Hope this simplifies the problem for anyone still facing the issue! http://jsfiddle.net/c3m77ah6/2/
希望这可以为仍然面临问题的任何人简化问题！ http://jsfiddle.net/c3m77ah6/2/
回答by Sebsemillia
You have to wrap your labelaround the select. Like this:
你必须把你label的select. 像这样：
<div class="form-group">
<label>C-Band
<select id="cband" class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option value="Other">Other</option>
</select>
</label>
</div>
And then add the following CSS:
然后添加以下 CSS：
.form-group label {
float: left;
text-align: left;
font-weight: normal;
}
.form-group select {
display: inline-block;
width: auto;
vertical-align: middle;
}
Here is your updated fiddle: Updated Fiddle
这是您更新的小提琴：更新的小提琴
回答by user889030
form-inline class with form-group will do the job like
带有表单组的表单内联类将完成类似的工作
<div class="form-group form-inline">
<label for="sel1">My InlineSelect: </label>
<select class="form-control" id="rotit">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
</div>
回答by Hoku
This problem is so recorrent that there is a Github project solving it
这个问题太严重了，有一个 Github 项目在解决它
https://fk.github.io/select2-bootstrap-css/
https://fk.github.io/select2-bootstrap-css/
Place their CSS file right after the CSS from Select2
将他们的 CSS 文件放在 Select2 的 CSS 之后
<link rel="stylesheet" href="css/select2.min.css">
<link rel="stylesheet" href="css/select2-bootstrap.css">
Then you can use the label along with the select
然后您可以将标签与选择一起使用
<div class="form-group">
<label for="sName">Select Title</label>
<select class="js-example-basic-single form-control" id="sName">
</select>
</div>
回答by Vadim Kirilchuk
It does work if you use the latest bootstrap: @import url('http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
如果您使用最新的引导程序，它确实有效：@import url(' http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
And please DON'T FORGET to make the column with result more than 768px. Form-inline works only if screen with more than 768px. (Just drag the column with a mouse a bit)
并且请不要忘记使结果超过 768px 的列。Form-inline 仅在屏幕超过 768px 时才有效。（只需用鼠标稍微拖动该列即可）
The issue was with css for
问题出在 css 上
@media (min-width: 768px)
.form-inline .form-control {
//old bootstrap
display: inline-block;
// new bootstrap
display: inline-block;
width: auto;
vertical-align: middle;
}
