Question

我想在bootstrap panel-heading右侧显示按钮我试图在所有按钮上添加右侧类，但它在panel-body上打破了一些css规则，如何在右侧显示所有按钮在bootstrap中panel-heading？

main.html中

   <div class="col-md-11">
    <div ng-show="showMessage">
        <p class="recordMessage">File is being recorded to the server ,once you stop recording it will prompt for cancel or download. </p>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">DIT LOGS
            <div class="pull-right" style="padding-right: 300px">
                <button type="button" class="btn btn-danger btn-rad btn-lg"><span class="glyphicon glyphicon-record"></span></button>
                <button type="button" class="btn btn-primary btn-rad btn-lg"><span class="glyphicon glyphicon-stop"></span></button>
                <button type="button" class="btn btn-success btn-rad btn-lg"><span class="glyphicon glyphicon-search"></span></button>
                <button type="button" class="btn btn-info btn-rad btn-lg"><span class="glyphicon glyphicon-folder-open"></span></button>
            </div>
        </div>
        <div class="panel-body display-logs" scroll-bottom="event">
            <ul style="list-style: none;">
                <li ng-repeat="message in event track by $index" ng-class="{lastItem: $last}"><span><strong>Log:</strong></span><span>{{message}}</span></li>
            </ul>
        </div>
    </div>
</div>

Answer 1

尝试将它们放在另一个div中

<div class="panel-heading">DIT LOGS
    <div class="pull-right">
        <button type="button" class="btn btn-danger btn-rad btn-xs"><span class="glyphicon glyphicon-record"></span></button>
        <button type="button" class="btn btn-primary btn-rad btn-xs"><span class="glyphicon glyphicon-stop"></span></button>
        <button type="button" class="btn btn-success btn-rad btn-xs"><span class="glyphicon glyphicon-search"></span></button>
        <button type="button" class="btn btn-info btn-rad btn-xs"><span class="glyphicon glyphicon-folder-open"></span></button>
    </div>
</div>

如何在引导程序面板标题中显示所有按钮？

1 个答案: