Html 如何在 Bootstrap 3 中垂直对齐标签和输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18519510/
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
How to vertically align label and input in Bootstrap 3?
提问by fat fantasma
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.
如何在 Bootstrap 3 中垂直对齐标签和输入？我希望标签和输入都在同一行。我玩过不同的类和自定义 CSS，但似乎没有任何效果。
<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>
采纳答案by Blowsie
The problem is that your <label>is inside of an <h2>tag, and header tags have a marginset by the default stylesheet.
问题是您<label>在<h2>标签内，并且标题标签具有margin默认样式表的设置。
回答by djiango
The bootstrap 3 docs for horizontal formslet you use the .form-horizontalclass to make your form labels and inputs vertically aligned. The structure for these forms is:
水平表单的引导程序 3 文档允许您使用.form-horizontal该类使表单标签和输入垂直对齐。这些表格的结构是：
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="input1" class="col-lg-2 control-label">Label1</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="input1" placeholder="Input1">
</div>
</div>
<div class="form-group">
<label for="input2" class="col-lg-2 control-label">Label2</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="input2" placeholder="Input2">
</div>
</div>
</form>
Therefore, your form should look like this:
因此，您的表单应如下所示：
<form class="form-horizontal" role="form">
<div class="form-group">
<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 id="class_type" class="form-control input-lg" autocomplete="off">
<option>Economy</option>
<option>Premium Economy</option>
<option>Club World</option>
<option>First Class</option>
</select>
</div>
</div>
</form>
回答by Bogac
I'm sure you've found your answer by now, but for those who are still looking for an answer:
我相信您现在已经找到了答案，但对于那些仍在寻找答案的人：
When input-lgis used, margins mismatch unless you use form-group-lgin addition to form-groupclass. Its example is in docs:
使用input-lg 时，边距不匹配，除非除了form-group类之外还使用form-group-lg。它的示例在文档中：
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
回答by MidnightJava
None of these solutions worked for me. But I was able to get vertical centering by using <div class="form-row align-items-center">for each form row, per the Bootstrap examples.
这些解决方案都不适合我。但是<div class="form-row align-items-center">根据Bootstrap 示例，我能够通过对每个表单行使用来获得垂直居中。
回答by Hemendra Singh
This works perfectly for me in Bootstrap 4.
这在 Bootstrap 4 中非常适合我。
<div class="form-row align-items-center">
<div class="col-md-2">
<label for="FirstName" style="margin-bottom:0rem !important;">First Name</label>
</div>
<div class="col-md-10">
<input type="text" id="FirstName" name="FirstName" class="form-control" val=""/>
/div>
</div>
