Question

----------------------------------------------------------------
|  Header  |                                |  Button           | --> (using .pull-right) button is not  vertically aligned
----------------------------------------------------------------

----------------------------------------------------------------
|  Header  ||  Button                                           | --> (not using .pull-right) button is vertically aligned
----------------------------------------------------------------

使用.pull-right向右拉按钮，但向右拉时按钮未垂直对齐（顶部边缘大于底部）。

添加<div class="clearfix"></div>垂直对齐按钮，但是标题没有垂直对齐（标题的底部边距太大）

.pull-right类的问题是什么？

Answer 1

.pull-right是样式值float: right;

的助手类

了解花车如何影响您的布局。

css-tricks.com: All about floats

或者您可以在包含元素中.text-right将按钮对齐到右边？

Answer 2

我遇到了同样的问题，将标题和按钮放在不同的行中解决了它。

<div class="container">
  <div class="col-md-8">
    Header      
  </div>
  <div class="col-md-4">
    <div class="pull-right">
      Button
    </div>
  </div>
</div>

boostrap拉右不垂直居中按钮

2 个答案: