如何在 Bootstrap 3 中垂直对齐标签和输入？答案

【问题标题】：How to vertically align label and input in Bootstrap 3?如何在 Bootstrap 3 中垂直对齐标签和输入？
【发布时间】：2013-09-02 09:25:09
【问题描述】：

如何在 Bootstrap 3 中垂直对齐标签和输入？我希望标签和输入都在同一行。我玩过不同的类和自定义 CSS，但似乎没有任何效果。

The JSfiddle

<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>

【问题讨论】：

标签： css html twitter-bootstrap-3

【解决方案1】：

bootstrap 3 文档for horizontal forms 让您可以使用.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>

因此，您的表单应如下所示：

<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>

【讨论】：

您的第二个示例与我的结果相同。我希望所有内容都在一条线上并正确对齐。这是您示例的 jsfiddle：jsfiddle.net/fatfantasma/6xH5s。还有其他建议吗？
对我来说，有效的方法是将form-horizontal 添加到我的<div class="form-group"> 中，这可能令人不悦，但它对我有用！因为我使用的是form-inline，所以这对我来说是必需的。所以我的最终解决方案看起来像这样<div class="form-inline"><div class="form-group form-horizontal"><label/><div class="col-md-5"><input/>
form-horizontal 为我工作，让我免于将 css 添加到单个标签和输入框。谢谢！

【解决方案2】：

问题在于您的<label> 位于<h2> 标签内，而标题标签的默认样式表设置了margin。

【讨论】：

如果可能，我将如何删除该边距？
好的，刚学这些东西。我修改了 h2 标签，因此它调整了 margin-top css。感谢您为我指明正确的方向。更新小提琴jsfiddle.net/fatfantasma/6xH5s/1

【解决方案3】：

我确定您现在已经找到了答案，但对于那些仍在寻找答案的人：

当使用 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>

【讨论】：

【解决方案4】：

这些解决方案都不适合我。但是我能够通过使用<div class="form-row align-items-center"> 为每个表单行获得垂直居中，每个Bootstrap examples。

【讨论】：

当其他方法似乎都不起作用时，这非常有效。
<div class='form-group row align-items-center'> 为我工作

【解决方案5】：

这在 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>

【讨论】：