부트 스트랩 패널의 오른쪽 가운데 왼쪽에 배열 텍스트가 나타납니다.

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