44

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

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

5 回答 5

47

水平表单的 bootstrap 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>

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

<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>
于 2013-08-29T19:32:27.653 回答
27

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

当使用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>
于 2015-02-21T09:52:11.593 回答
15

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

于 2018-04-19T18:34:32.687 回答
11

问题是您<label>在<h2>标签内，并且标题标签具有margin默认样式表的设置。

于 2013-08-29T19:32:49.310 回答
2

这在 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>
于 2020-04-25T16:08:49.627 回答