html - 将 Bootstrap btn-group 添加到面板标题会在面板标题下方添加空间

Question

我试图将一个按钮放入面板标题部分，但我无法让它显示在同一行上。在 StackOverflow 上的一些问题的帮助下，我设法让它居中，其他人询问标题右侧的按钮，但添加按钮似乎会使标题更高。

我有一个显示差异的示例 Bootply

代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default" ng-init="getApplications()">
    <div class="panel-heading clearfix">
       <b>Title has space below</b>
         <div class="btn-group pull-right">
          <a href="#" class="btn btn-default btn-sm">new</a>
        </div>
     </div>
    <div class="panel-body">
        <!-- table -->
        <table class="table table-striped table-condensed table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Last Release Date</th>
                    <th>Orders</th>
                    <th>Downloads</th>
                    <th>Activations</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="app in apps">
                    <td>{{app.columns.name}}</td>
                    <td>{{app.lastReleaseDt}} </td>
                    <td>{{app.totalOrders}}</td>
                    <td>TODO </td>
                    <td>{{app.totalActivations}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="panel panel-default" ng-init="getApplications()">
    <div class="panel-heading clearfix">
       <b>Title has no space</b>
     </div>
    <div class="panel-body">
        <!-- table -->
        <table class="table table-striped table-condensed table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Last Release Date</th>
                    <th>Orders</th>
                    <th>Downloads</th>
                    <th>Activations</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="app in apps">
                    <td>{{app.columns.name}}</td>
                    <td>{{app.lastReleaseDt}} </td>
                    <td>{{app.totalOrders}}</td>
                    <td>TODO </td>
                    <td>{{app.totalActivations}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

有人知道为什么向面板标题添加按钮或按钮组会增加高度吗？关于将高度设置为按钮之前的高度的任何提示？

Answer 1

因为您使用的是 btn-sm(适用于小型设备)，如果您使用 btn-xs(适用于超小型设备)，空间将会消失，因为拥有更小的 padding

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default" ng-init="getApplications()">
    <div class="panel-heading clearfix">
       <b>Title has space below</b>
         <div class="btn-group pull-right">
          <a href="#" class="btn btn-default btn-xs">new</a>
        </div>
     </div>
    <div class="panel-body">
        <!-- table -->
        <table class="table table-striped table-condensed table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Last Release Date</th>
                    <th>Orders</th>
                    <th>Downloads</th>
                    <th>Activations</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="app in apps">
                    <td>{{app.columns.name}}</td>
                    <td>{{app.lastReleaseDt}} </td>
                    <td>{{app.totalOrders}}</td>
                    <td>TODO </td>
                    <td>{{app.totalActivations}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="panel panel-default" ng-init="getApplications()">
    <div class="panel-heading clearfix">
       <b>Title has no space</b>
     </div>
    <div class="panel-body">
        <!-- table -->
        <table class="table table-striped table-condensed table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Last Release Date</th>
                    <th>Orders</th>
                    <th>Downloads</th>
                    <th>Activations</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="app in apps">
                    <td>{{app.columns.name}}</td>
                    <td>{{app.lastReleaseDt}} </td>
                    <td>{{app.totalOrders}}</td>
                    <td>TODO </td>
                    <td>{{app.totalActivations}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>