如何在 Bootstrap 3 中垂直对齐标签和输入? [英] How to vertically align label and input in Bootstrap 3?
本文介绍了如何在 Bootstrap 3 中垂直对齐标签和输入?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在 Bootstrap 3 中垂直对齐标签和输入?我希望标签和输入都在同一行.我玩过不同的类和自定义 CSS,但似乎没有任何效果.
<div class="row"><div class="col-xs-3"><label for="class_type"><h2><span class="label label-primary">Class Type</span></h2></label><div class="col-xs-2"><select name="class_type" id="class_type" class="form-control input-lg" style="width:200px" autocomplete="off"><option >经济</option><option >Premium Economy</option><option >俱乐部世界</option><option >头等舱</option></选择>
解决方案
问题是你的 在
标签内,和标题标签有一个
margin
由默认样式表设置.
How to vertically align label and input in Bootstrap 3? I would like both the label and input on same line. I have played around with different classes and custom CSS but nothing seems to work.
<div class="form-group">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>
</div>
解决方案
The problem is that your <label>
is inside of an <h2>
tag, and header tags have a margin
set by the default stylesheet.
这篇关于如何在 Bootstrap 3 中垂直对齐标签和输入?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!