Bootstrap 3面板接头连接器，按钮位置错误

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

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

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

我将从将clearfix类添加到<div>with 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

我在这里玩游戏有点晚，但是简单的答案是在按钮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

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

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

尝试像这样放入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;">它接缝了，可以工作了。

现在，我只需要添加一些顶点对齐即可。

在这种情况下，您应该.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-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;
    }
}

该h4元素显示为块。在其上添加边框，您将看到正在发生的事情。如果要在其右边浮动某物，则有多种选择：

1. 放置浮动项之前的块（H4）元件。
2. 还要浮动h4元素。
3. 内联显示h4元素。

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

您可能还想将panel-title类添加到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>