自举3面板头与按钮错误的位置

小开

您应该应用一个“ 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>

编辑于2015年12月22日-标题 div 添加. clearfix

小开

你是部分正确的。与 <b>title</b>它看起来很好，但我想使用 <h4>。

我把 <h4 style="display: inline;">和它似乎工作。

现在，我只需要添加一些垂直对齐。

小开

试着把 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

小开

首先，我将使用 panel-heading类将 clearfix类添加到 <div>。然后，将 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

小开

我把按钮组放在标题中，然后在底部添加了一个清除符。

<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>

小开

h4元素显示为一个块。添加一个边框，你就会看到发生了什么。如果你想让某个东西浮动到它的右边，你有很多选择:

将浮动项之前放置在 block (h4)元素中。
也浮动 h4元素。
内联显示 h4元素。

无论哪种情况，您都应该将 clearfix类添加到容器元素中，以获得正确的按钮填充。

您可能还希望将 panel-title类添加到 h4元素，或者调整它的填充。

小开

这里我有点晚了，但是简单的答案是在按钮 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行开始。

将浮动移动到列表的顶部可以消除这个问题，因为没有先前的元素将其向下推，浮动之后的任何内容都将在顶部行呈现(假设该行上有所有项目的空间)

正确和不正确排序及效果的例子: Http://www.bootply.com/hkdlnikv9g

小开

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

然后使用这个较少的代码:

.panel-heading.contains-buttons {
.clearfix;
.panel-title {
.pull-left;
padding-top:5px;
}
.btn {
.pull-right;
}
}

小开

在这种情况下，您应该在带有浮动元素的容器末尾添加 .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

小开

还是这个? 通过使用行类

  <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>