CSS 使用 Bootstrap 将按钮组放置在标题的最右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13136194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Place button group at the far right side of a header with Bootstrap
提问by Amree
I've managed to place a button group at the far side of a header (H1/H2/H3). However, I don't know how to make the button float vertically in the middle. It just stays at the top. I tried using margin-topbut since it's a fixed value it won't be dynamically placed in the middle.
我已经设法在标题（H1/H2/H3）的远端放置了一个按钮组。但是，我不知道如何使按钮在中间垂直浮动。它只是停留在顶部。我尝试使用，margin-top但由于它是一个固定值，因此不会动态放置在中间。
Here's the screenshot:
这是屏幕截图：
Here's the code:
这是代码：
<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>
Thanks in advance.
提前致谢。
jsFiddle:http://jsfiddle.net/aurorius/PKrUC/
jsFiddle：http : //jsfiddle.net/aurorius/PKrUC/
回答by johnsorrentino
This how to get a button lined up with the header in Bootstrap 3.2, 3.3 without any additional CSS in case anyone is coming here from Google.
这是如何让按钮与 Bootstrap 3.2、3.3 中的标题对齐，而无需任何额外的 CSS，以防有人从 Google 来到这里。
Option 1
选项1
<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>
The button group is optional if you're only using a single button.
如果您只使用一个按钮，则按钮组是可选的。
Option 2
选项 2
<h1>
<span>Header Text</span>
<button class='btn btn-primary pull-right'>Button Text</button>
</h1>
<hr/>
回答by Selvamani
Try this css code
试试这个 css 代码
.btn-group.my-class{
bottom: 15px;
position: relative;
top: 15px;
}
Dynamic header on H1/H2/H3 and may be H4
H1/H2/H3 上的动态标头，可能是 H4
回答by Sem
Using a float disables te display:inline-block;property, making it float to the top.
使用浮动会禁用 tedisplay:inline-block;属性，使其浮动到顶部。
Just add the bootstrap class text-rightto the container to keep the vertical align intact.
只需将引导类添加text-right到容器中即可保持垂直对齐不变。
