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

问题描述

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

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

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

我应该将哪些CSS添加到标题，面板标题或按钮中？

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

推荐答案

我将首先添加 clearfix 类到< div& / code>与 panel-heading 类。然后，将 panel-title 和 pull-left 添加到 H4 标记。然后，根据需要添加 padding-top

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.

以下是完整的代码：

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