html - 面板标题中的 bootstrap 3 按钮组未居中

Question

我在面板标题中有一个按钮组。我希望它们向右浮动，但是当我这样做时，按钮现在位于标题底部，我需要它们居中。我该怎么做？

这是 HTML:

<div class="panel panel-default">
    <div class="panel-heading">
        Member of the following Units
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
            <button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
        </div>
    </div>
    <div class="panel-body">
        test
    </div>
    <div class="panel-footer">
        test
    </div>      
</div>

还有一个 fiddle 例子:http://jsfiddle.net/snowburnt/4ejuK/

奇怪的是，在我的 Chromium Linux 开发环境中，按钮本身正确居中，但其中的图标低于应有的位置，我觉得这将解决这两个问题。

Answer 1

1. 您应该将类​​ pull-right 添加到您的 .btn-group div，而不是指定 float:right。

2. 当您 float 元素时，它会失去 block 布局。它不会再“向下推”容器的底部，因为它没有高度。您可以通过在 .panel-heading 上设置 overflow:hidden 来解决此问题，以允许其正确调整大小。您必须将顶部填充添加到 .panel-heading 并将负顶部填充添加到 .btn-group 以适应 .btn-group 的高度.

我 fork 了你的 fiddle :http://jsfiddle.net/Dq5ge/