120

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

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

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

4

10 回答 10

179

我将首先将clearfix类添加到<div>withpanel-heading类。然后,将panel-title和都添加pull-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

于 2013-12-05T22:35:41.517 回答
155

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

于 2014-05-23T14:24:24.620 回答
41

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

于 2013-09-23T16:17:11.140 回答
10

我将按钮组放在标题内,然后在底部添加了一个 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>
于 2013-12-22T02:01:25.760 回答
8

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

于 2013-09-24T14:53:49.890 回答
6

你是对的。看起来不错,<b>title</b>但我想使用<h4>.

我已经把<h4 style="display: inline;">它接缝工作了。

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

于 2013-09-23T18:06:12.690 回答
6

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

于 2016-09-06T09:14:04.110 回答
1

我发现在 .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;
    }
}
于 2014-11-20T16:39:47.483 回答
0

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

  1. 将浮动项目放在块 (h4) 元素之前。
  2. 也浮动 h4 元素。
  3. 内联显示 h4 元素。

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

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

于 2014-02-13T09:10:05.667 回答
0

或这个?通过使用行类

  <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>
于 2017-08-04T06:47:11.847 回答