将bootstrap btn-group添加到panel-heading会在面板标题

Question

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

我有一个示例显示差异Bootply

代码

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有没有人有任何想法为什么在面板标题中添加按钮或按钮组会增加高度？有关使高度达到按钮前的高度的提示吗？

Answer 1

因为您使用btn-sm（对于小型设备），如果您使用btn-xs（对于超小型设备），由于padding <更小，空间将会消失/ p>

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