Bootstrap 3:如何创建带有选择和标签的内联表单？
Bootstrap 3:如何创建带有选择和标签的内联表单？
提问于 2013-11-05 03:19:53
我的标签总是出现在选择的上方。我希望他们都在同一条线上。请参阅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>回答 5
Stack Overflow用户
发布于 2015-06-19 09:46:07
bootstrap中有一条CSS规则，在小屏幕上将.form-control的宽度设置为100%。因此，即使它是浮动的，它也将占据整个宽度，因此从新行开始。好消息是你只需要几行CSS就可以覆盖它：
.form-control {
width:auto;
display:inline-block;
}希望这能简化任何仍然面临这个问题的人的问题！http://jsfiddle.net/c3m77ah6/2/
Stack Overflow用户
发布于 2014-08-18 00:12:25
你必须把你的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>然后添加以下CSS：
.form-group label {
float: left;
text-align: left;
font-weight: normal;
}
.form-group select {
display: inline-block;
width: auto;
vertical-align: middle;
}这是你最新的提琴：Updated Fiddle
Stack Overflow用户
发布于 2018-03-04 12:00:32
带有form-group的表单内联类将完成如下工作
<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> 演示：http://jsfiddle.net/9arahevn/2/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19775344
复制相关文章
相似问题
腾讯云开发者
