Question

如何在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>

Answer 1

bootstrap 3 docs 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>

Answer 2

我相信你现在已经找到了答案，但对那些仍在寻找答案的人来说：

使用 input-lg 时，除非您使用 form-group-lg 以及 form-group 类，否则边距不匹配。它的例子是在docs中：

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

Answer 3

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

Answer 4

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

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

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

5 个答案: