如何在引导程序中将 div 与类 pull-right 垂直居中对齐答案

【问题标题】：How to align the div with class pull-right vertically center in bootstrap如何在引导程序中将 div 与类 pull-right 垂直居中对齐
【发布时间】：2015-12-04 14:52:38
【问题描述】：

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

<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

【问题讨论】：

使用form-inline 而不是form-horizontal。
这里有一个小提琴供你复习。 jsfiddle.net/1ph4kz30
这是更新后的小提琴，按钮包裹在带有 pull-right 类的
中。 jsfiddle.net/1ph4kz30/1

标签： html css twitter-bootstrap

【解决方案1】：

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

更多信息请参见Bootstraps documentation。

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

【讨论】：