如何使用Boostrap水平定位分頁工具欄的元素？

我正在開發一個AngularJS項目，並且在我的一個視圖中我有一個表格，它將實現分頁。我希望分頁的控件如下：如何使用Boostrap水平定位分頁工具欄的元素？

水平堆疊，具有Previous按鈕，指示頁面總數的文本和Next按鈕。
選擇包含希望在表格中可視化的每個頁面的元素數量以及僅顯示「每頁元素數」的文本
輸入頁數的文本輸入以及將加載的轉到按鈕指示的頁面。
所有這些都必須水平排序。

我定義這個組件，如這在我的觀點：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6"> 
     <ul class="pagination pagination-sm"> 
     <li ><a href="#" ng-click="uc.previousPage()">Anterior</a></li> 
     <li ><a>1 de 10 páginas</a></li> 
     <li><a href="#" ng-click="uc.nextPage()">Siguiente</a></li> 

     </ul> 
    </div> 

    <div class="col-md-3"> 
     <select class="form-control" ng-model="uc.defaultSelect" ng-options="n for n in uc.elementsPerPage" ></select> 
     <label>elementos por página</label> 
    </div> 

    <div class="col-md-3"> 
     <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Ir a página..." /> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button">Ir</button> 
     </span> 
     </div> 
    </div> 
    </div> 
</div>

但最終的結果我得到這個樣子的

的導航按鈕看起來完全脫機，選擇太大，它將標籤推到一個新的行，看起來不錯的是去頁面輸入。

什麼樣的造型可以使用Bootstrap來實現我期望的外觀？

來源

2016-04-26 Uriel Arvizu

最後，我不得不放棄使用pagination風格，改爲button-group，我刪除了一些標籤，並結束了與此：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6 btn-group"> 

     <button type="button" class="btn btn-default" ng-click="uc.previousPage()">Anterior</button> 
     <a class="btn btn-default disabled">1 de 10 páginas</a> 
     <button type="button" class="btn btn-default" ng-click="uc.nextPage()">Siguiente</button> 
    </div> 

    <div class="col-md-3"> 
     <select class="form-control form-control-sm" ng-model="uc.defaultSelect" ng-options="n as (n + ' por página') for n in uc.elementsPerPage" ></select> 
    </div> 

    <div class="col-md-3"> 
     <div class="input-group"> 
     <input type="text" ng-model="uc.page" class="form-control" placeholder="Ir a página..." /> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button" ng-click="uc.goToPage()">Ir</button> 
     </span> 
     </div> 
    </div> 

    </div> 
</div>

現在我得到這個在我看來：

我可以添加一些顏色，如果有必要，我只是有一個漂亮的分頁工具欄。

來源

2016-04-26 17:58:45

如何使用Boostrap水平定位分頁工具欄的元素？

回答

相關問題