ブートストラップパネルの見出しにすべてのボタンを表示するにはどうすればよいですか？

Question

私はブートストラップの右側にボタンを表示したいpanel-headingすべてのボタンにプルー右クラスを追加しようとしましたが、panel-bodyにいくつかのCSSルールを壊そうとしましたが、どうすればブートストラップの右側にすべてのボタンを表示できますか？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

は、それがjsfiddleに働くように見える他の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>