Bootstrap 3 面板标题，按钮位置错误 [英] Bootstrap 3 panel header with buttons wrong position

问题描述

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

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

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

解决方案

我会首先将 clearfix 类添加到

和 面板-标题 类.然后，将 panel-title 和 pull-left 添加到 H4 标签.然后，根据需要添加 padding-top.

完整代码如下:

<div class="panel-heading clearfix"><h4 class="panel-title pull-left" style="padding-top: 7.5px;">面板标题</h4><div class="btn-group pull-right"><a href="#" class="btn btn-default btn-sm">## 锁</a><a href="#" class="btn btn-default btn-sm">## 删除</a><a href="#" class="btn btn-default btn-sm">## 移动</a>

...

http://bootply.com/98827

I am using Bootstrap 3 and I would like to add some buttons in panel header, on top-right corner. When trying to add them, they are show below title baseline.

Code : http://bootply.com/82631

What are the missing CSS I should add either to the title, panel heading, or buttons ?

解决方案

I would start by adding clearfix class to the <div> with panel-heading class. Then, add both panel-title and pull-left to the H4 tag. Then, add padding-top, as necessary.

Here's the complete code:

<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

这篇关于Bootstrap 3 面板标题，按钮位置错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！