我正在使用boostrap 3，我想在右上角的面板标题中添加一些按钮。在尝试添加它们时，它们显示在标题基线下方。
我应该在标题，面板标题或按钮中添加什么缺少的CSS？
答案 0 :(得分：169)
我首先将clearfix类添加到<div>类panel-heading。然后，将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>
答案 1 :(得分：151)
我这里的游戏有点迟了，但简单的答案是在按钮div之后移动H4。这是浮动时的常见问题，在其余内容之前始终定义浮动，否则您将有额外的换行问题。
<div class="panel-heading">
<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>
<h4>Panel header</h4>
</div>
这里的问题是当你的浮点数被定义在其他项目之后时，浮点数的顶部将从它前面的元素的最后一个行位置开始。因此，如果前一项包装到第3行，那么您的浮点数也将从第3行开始。
将浮动移动到列表的顶部消除了问题，因为没有先前的元素将其向下推，浮动之后的任何内容都将在顶行呈现（假设所有项目都有空间）< / p>
正确和错误排序及效果的示例： http://www.bootply.com/HkDlNIKv9g
答案 2 :(得分：41)
您应该应用“clearfix”来清除父元素。接下来，标题标题的h4一直延伸到标题，因此在应用clearfix之后，它将向下推导子元素，导致标题div具有更大的高度。
这是一个修复程序，只需将其替换为您的代码。
<div class="panel-heading clearfix">
<b>Panel header</b>
<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>
于12/22/2015编辑 - 将.clearfix添加到标题div
答案 3 :(得分：10)
我将按钮组放在标题内，然后在底部添加了一个clearfix。
<div class="panel-heading">
<h4 class="panel-title">
Panel header
<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>
</h4>
<div class="clearfix"></div>
</div>
答案 4 :(得分：8)
尝试将btn-group放在H4这样的内容中。
<div class="panel-heading">
<h4>Panel header
<span 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>
</span>
</h4>
</div>
答案 5 :(得分：6)
你是对的。使用<b>title</b>看起来不错，但我想使用<h4>。
我已将<h4 style="display: inline;">和它的接缝工作。
现在，我只需要添加一些vertival align。
答案 6 :(得分：6)
在这种情况下，您应该在容器末尾添加.clearfix并使用浮动元素。
<div class="panel-heading">
<h4>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>
<span class="clearfix"></span>
</div>
答案 7 :(得分：1)
我发现在.panel-heading帮助中使用了一个额外的类。
<div class="panel-heading contains-buttons">
<h3 class="panel-title">Panel Title</h3>
<a class="btn btn-sm btn-success pull-right" href="something.html"><i class="fa fa-plus"></i> Create</a>
</div>
然后使用这个更少的代码：
.panel-heading.contains-buttons {
.clearfix;
.panel-title {
.pull-left;
padding-top:5px;
}
.btn {
.pull-right;
}
}
答案 8 :(得分：0)
h4元素显示为块。添加一个边框，你会看到发生了什么。如果你想在它的右侧浮动一些东西，你有很多选择：
在任何一种情况下，都应该将clearfix类添加到容器元素中，以便为按钮获得正确的填充。
您可能还想在h4元素中添加panel-title类或调整填充。
答案 9 :(得分：0)
还是这个？通过使用行类
<div class="row">
<div class=" col-lg-2 col-md-2 col-sm-2 col-xs-2">
<h4>Panel header</h4>
</div>
<div class=" col-lg-10 col-md-10 col-sm-10 col-xs-10 ">
<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>
</div>