如何在引导程序中将div与类右拉垂直居中对齐

Question

我想创建一个带有标签输入字段和按钮的表单行。前两个元素应该左对齐，按钮应该对齐。 我已经尝试了右拉类，但它破坏了按钮的垂直对齐方式。我希望它垂直居中。我试图设置行高，但它会破坏标签的垂直对齐方式。 （我希望标签也相对于输入垂直对齐）

<form class="form-horizontal">
   <div class="form-group col-sm-11">
       <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
       <div class="col-sm-3">
           <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
       </div>
   </div>
   <div class="pull-right">
        <button>Add</button>
   </div>
</form>

http://plnkr.co/edit/i8jmEowKaKOcM2P8N225?p=preview

Answer 1

如评论中所述：要在一行中显示多个表单元素，请使用form-inline类。这适用于视口中至少宽度为768px的表单（因此请在全屏幕中观看下面的示例以查看效果）。

有关详细信息，请参阅Bootstraps documentation。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
  <div class="form-group">
    <label for="inputEmail3">Email</label>
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
  <div class="pull-right">
    <button class="btn btn-default">Add</button>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;