Bootstrap 3面板头button位置错误

我正在使用boostrap 3,我想在右上angular的面板标题中添加一些button。 试图添加它们时,它们显示在标题基线下面。

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

什么是缺less的CSS我应该添加到标题,面板标题或button?

我将开始通过将panel-heading类添加到<div> clearfix类。 然后,添加panel-titlepull-leftH4标签。 然后,根据需要添加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

我在这里的游戏有点晚,但简单的答案是移动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> 

http://bootply.com/lpXoMPup2d

你是正确的。 与<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> 

http://www.bootply.com/NCXkOtIkD6

我发现在.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:

  1. 放置块(h4)元素之前的浮动项目。
  2. 也漂浮h4元素。
  3. 内联显示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>