面板标题中的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>

和一个小提琴的例子:http://jsfiddle.net/snowburnt/4ejuK/

奇怪的是,在我的Linux开发环境中使用chrome,按钮本身是正确居中的,但其中的图标低于应有的位置,我有一种感觉,这将解决这两个问题.

Answer 1

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

2. 浮动元素时,它会丢失块布局.由于它没有高度,它将不再"压下"其容器的底部.您可以通过设置解决这个问题overflow:hidden您.panel-heading,以使其能够正常调整.您将不得不将顶部填充添加到.panel-heading负顶部填充.btn-group到容纳高度.btn-group.

我把你的小提琴分开:http://jsfiddle.net/Dq5ge/