使用Bootstrap将button组放在标题的最右侧

我已经设置了一个button组在一个头（H1 / H2 / H3）的远端。 但是，我不知道如何使button在中间垂直浮动。 它只是停留在顶部。 我尝试使用margin-top但由于它是一个固定的值，它不会被dynamic地放在中间。

这是截图：

代码如下：

 <div class="container"> <section> <div class="page-header"> <h1 class="pull-left"> The header </h1> <div class="pull-right"> <div class="btn-group"> <button class="btn btn-primary"> Actions </button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another Action</a> </li> </ul> </div> </div> <div class="clearfix"></div> </div> Contents </section> </div> 

提前致谢。

jsFiddle： http : //jsfiddle.net/aurorius/PKrUC/

Answer 1

这个如何获得一个button在Bootstrap 3.2,3.3中排队，没有任何额外的CSS，以防止任何人来自Google。

选项1

http://jsfiddle.net/ypaL5nko/

 <div class='page-header'> <div class='btn-toolbar pull-right'> <div class='btn-group'> <button type='button' class='btn btn-primary'>Button Text</button> </div> </div> <h2>Header Text</h2> </div> 

如果您只使用一个button，button组是可选的。

选项2

http://jsfiddle.net/sLdnae3q/

 <h1> <span>Header Text</span> <button class='btn btn-primary pull-right'>Button Text</button> </h1> <hr/> 

Answer 2

试试这个CSS代码

 .btn-group.my-class{ bottom: 15px; position: relative; top: 15px; } 

H1 / H2 / H3上的dynamic报头，可能是H4

演示： http : //jsfiddle.net/PKrUC/2/

Answer 3

使用float禁用te display:inline-block; 财产，使其浮动到顶部。

只需将引导类text-right添加到容器，以保持垂直alignment。