css - Bootstrap 3面板标题按钮位置错误

Question

我正在使用 Bootstrap 3，我想在右上角的面板标题中添加一些按钮。尝试添加它们时，它们显示在标题基线下方。

代码:http://bootply.com/82631

我应该向标题、面板标题或按钮添加哪些缺失的 CSS？

Answer 1

我会先添加 clearfix类到 <div>与 panel-heading类(class)。然后，同时添加 panel-title和 pull-left到 H4标签。然后，添加 padding-top ，如有必要。

完整代码如下:

<div class="panel panel-default">
    <div class="panel-heading clearfix">
      <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
      <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
      </div>
    </div>
    ...
</div>

http://bootply.com/98827