Bootstrap 3面板头button位置错误
我正在使用boostrap 3，我想在右上angular的面板标题中添加一些button。 试图添加它们时，它们显示在标题基线下面。
代码： http ： //bootply.com/82631
什么是缺less的CSS我应该添加到标题，面板标题或button？
我将开始通过将panel-heading类添加到<div> clearfix类。 然后，添加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>
我在这里的游戏有点晚，但简单的答案是移动button格后的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行开始。
将浮动移动到列表的顶部可以消除这个问题，因为没有先前的元素将其推下，浮动之后的任何元素都将显示在顶部行（假设所有项目都有空间）
正确和不正确的sorting和效果示例： http ： //www.bootply.com/HkDlNIKv9g
您应该应用“清除”来清除父元素。 接下来，标题标题h4一直延伸到标题，所以在你应用clearfix之后，它会将子元素向下推，导致标题div具有更大的高度。
这是一个修复，只需要用你的代码replace它。
<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
我将button组放在标题内，然后在底部添加一个清晰的修正。
<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>
尝试把这个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>
你是正确的。 与<b>title</b>它看起来不错，但我想使用<h4> 。
我已经把<h4 style="display: inline;"> ，它接缝工作。
现在，我只需要添加一些垂直alignment。
在这种情况下，应该在包含浮动元素的容器的末尾添加.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>
我发现在.panel标题帮助上使用了一个额外的类。
<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>
然后使用这个较less的代码：
.panel-heading.contains-buttons { .clearfix; .panel-title { .pull-left; padding-top:5px; } .btn { .pull-right; } }
h4元素显示为一个块。 添加一个边框，你会看到发生了什么事情。 如果你想浮动一些东西，你有很多select：
- 放置块（h4）元素之前的浮动项目。
- 也漂浮h4元素。
- 内联显示h4元素。
无论哪种情况，您都应该将clearfix类添加到容器元素中，以便为button获得正确的填充。
您可能还想将panel-title类添加到h4元素上，或者调整h4元素上的填充。
或这个？ 通过使用行类
<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>
