ブートストラップパネルの右中段左にアレンジテキストが表示されます。

Question

私はブートストラップパネルを作成していますが、問題は、テキストを右に、ユーザアイコンを中央に、残りのボタンを左にアライメントすることです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="container"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading clearfix"> 
 
      <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4> 
 
       
 
           
 
        <div class="pull-center"> 
 
         <button class="btn btn-primary"><i class="glyphicon glyphicon-user"></i></button> 
 
        </div> 
 
        
 
        <div class="pull-right"> 
 
         <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button> 
 
         <button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button> 
 
        </div> 
 
       
 
     </div> 
 
     <div class="panel-body"> 
 
      Panel content 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

はちょうどこのような全体の見出しのためtext-centerように使用..

<div class="panel panel-primary"> 
     <div class="panel-heading text-center"> 
      <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4> 
      <button class="btn btn-primary"><i class="glyphicon glyphicon-user"></i></button> 
      <div class="pull-right"> 
        <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button> 
        <button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button> 
      </div> 
     </div> 
     <div class="panel-body"> 
      Panel content 
     </div> 
    </div> 

http://www.codeply.com/go/P2m3GmIKNQ