Bootstrap 3 面板标题按钮位置错误答案

【问题标题】：Bootstrap 3 panel header with buttons wrong positionBootstrap 3 面板标题按钮位置错误
【发布时间】：2013-09-28 14:56:41
【问题描述】：

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

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

我应该在标题、面板标题或按钮中添加哪些缺少的 CSS？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您应该应用“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 日编辑 - 将 .clearfix 添加到标题 div

【讨论】：

如果您将 clearfix 类添加到面板标题而不是添加另一个空 div 应该可以工作

【解决方案2】：

你说对了。 <b>title</b> 看起来不错，但我想使用 <h4>。

我已经输入了<h4 style="display: inline;">，它可以正常工作了。

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

【讨论】：

inline-block 更好。

【解决方案3】：

尝试像这样将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

【讨论】：

不，这不是“好习惯”，但它确实回答了最初的问题。我根据最佳实践更新答案。

【解决方案4】：

我首先将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>

http://bootply.com/98827

【讨论】：

这行得通，唯一的问题是 Panel Header 被拉到 div 的顶部并且 btn-group 垂直对齐
或者只是从<h4> 中删除.panel-title，你就不需要填充了。

【解决方案5】：

我将按钮组放在标题内，然后在底部添加了一个 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>

【讨论】：

更优雅：
;)

【解决方案6】：

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

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

在任何一种情况下，您都应该将 clearfix 类添加到容器元素中以获得正确的按钮填充。

您可能还想将 panel-title 类添加到 h4 元素或调整其填充。

【讨论】：

【解决方案7】：

我在这里玩游戏有点晚了，但简单的答案是将 H4 移动到按钮 div 之后。这是浮动时的常见问题，请始终在其余内容之前定义您的浮动，否则您将遇到额外的换行问题。

<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

【讨论】：

如果您不喜欢 h4 尺寸，请使用
Panel header
我无法弄清楚为什么我的按钮不适合面板标题。该按钮被面板标题的填充按下，不会增加面板标题的高度。我究竟做错了什么？（编辑：显然那是因为向 h4 添加了一个类......但现在标题仍然太高了。）
我必须在面板标题中添加 clearfix 并像上面的答案一样添加填充。你能做一个工作示例/演示吗？
Nate，这里是正确与错误排序的示例。 bootply.com/HkDlNIKv9g
我认为应该将 btn-sm 类更改为 btn-xs。它更适合

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

还是这个？通过使用行类

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

【讨论】：