Bootstrap - 将按钮与井垂直对齐答案

【问题标题】：Bootstrap - Vertically Align Button With WellBootstrap - 将按钮与井垂直对齐
【发布时间】：2015-07-08 13:43:27
【问题描述】：

我有一口井，我正在尝试垂直对齐它右侧的按钮。我想我可以只使用传统的 CSS，但我不想冒破坏引导程序的风险。

  <div class='container'>
    <div class='row well top-buffer'>
      <div class='col-md-10'>
        <a href='#' id='dl'>v0.0.1 - July 11, 2015 | 20:15:34</a>
        <p>Note: This beta is only available until<br>August 8, 2015 at 11:59PM PST</p>
      </div>
      <div class='col-md-2 vcenter'>
        <button type="button" class="btn btn-primary btn-lg pull-right">Download</button>
      </div>
    </div>
  </div>

JSFiddle

【问题讨论】：

按钮已经向右对齐。 Bootstrap “pull-right” 类负责处理它。看看这个 => codepen.io/anon/pen/eNMbPa.

标签： html css twitter-bootstrap

【解决方案1】：

you have to use col-xs class to make it possible have a look on js fillde i have created for you :  `https://jsfiddle.net/2w4Lc5L7/`

【讨论】：

有趣。看起来我只需要为 vcenter 的 CSS 添加边距。谢谢！

【解决方案2】：

将 pull-right 类添加到 div 而不是按钮。

    <div class="col-md-2 vcenter pull-right">
        <button type="button" class="btn btn-primary btn- lg">Download</button>
    </div>

【讨论】：