wyrównanie elementów w panelu nagłówka Bootstrap

Question

W celu uzyskania 3 elementy w nagłówku panelu Próbowałem to:

<div class="panel panel-primary"> 
      <!-- Default panel header contents --> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <div class="pull-left"> 
         <h4 class="panel-title"> <i class="glyphicon glyphicon-user"></i> 
          Users 
         </h4> 
        </div> 
        <div class="header-center"> 
         <pagination class="panel-title" ng-show="totalItems > pageParameters.size" items-per-page="pageParameters.size" boundary-links="true" total-items="totalItems" ng-model="currentPage" ng-change="changePage()" 
            previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination> 
        </div> 
        <div class="pull-right"> 
         <span class="panel-title btn-group"> 
          <button ng-disabled="underCreation" type="button" class="btn btn-default btn-sm" ng-click="addUser()"> 
           <span class="glyphicon glyphicon-plus text-primary"></span> 
           <span class="text-primary"><strong>Add</strong></span> 
          </button> 
         </span> 
        </div> 
       </h4> 
       <div class="clearfix"></div> 
      </div> 
</div> 

I .less plik odpowiadający:

.header-center { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    } 

ale to świadczy:

Potrzebuję przycisku Dodaj do wyrównania z innymi elementami ..

Answer 1

można używać siatek bootstrap, aby rozwiązać ten problem można użyć Col-XS-3, Col-XS-6, Col-XS-3, aby utworzyć 3 równoległych kolumn sprawdzić kod na więcej wyjaśnień http://jsfiddle.net/5doxw0ea/

HTML:

<div class="container"> 

    <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <div class="container-fluid panel-container"> 
       <div class="col-xs-3 text-left"> 
        <h4 class="panel-title abc"> 
         <i class="glyphicon glyphicon-user"></i> 
         Users 
        </h4> 
       </div> 
       <div class="col-xs-6 text-center "> 
        <ul class="pagination panel-pagination"> 
         <li> 
          <a href="#" aria-label="Previous"> 
         <span aria-hidden="true">&laquo;</span> 
          </a> 
         </li> 
         <li><a href="#">1</a></li> 
         <li><a href="#">2</a></li> 
         <li><a href="#">3</a></li> 
         <li> 
          <a href="#" aria-label="Next"> 
         <span aria-hidden="true">&raquo;</span> 
          </a> 
         </li> 
         </ul> 
       </div> 
       <div class="col-xs-3 text-right"> 
        <span class="panel-title btn-group"> 
         <button ng-disabled="underCreation" type="button" class="btn btn-default btn-sm abc" ng-click="addUser()"> 
          <span class="glyphicon glyphicon-plus text-primary"></span> 
          <span class="text-primary"><strong>Add</strong></span> 
         </button> 
        </span> 
       </div>   
      </div>   
     </div> 
    </div> 
</div> 

CSS:

.panel-pagination { 
    margin: 0 0 !important; 
} 
.panel-container { 
    padding-right: 0 !important; 
    padding-left: 0 !important; 
    height:35px; 
} 
.abc{ 
    height:35px; 
     display:table-cell !important; 
     vertical-align:middle; 
} 

Answer 2

można też po prostu przejść do trzeciego div pull-right powyżej sek ond div header-center, jeśli nie potrzebujesz pełnej siatki.