如何使用 Bootstrap 水平定位分页工具栏的元素？

Question

我正在做一个 AngularJS 项目，在我的一个观点中，我有一个 table 将在其上实现分页。我希望分页控件如下：

水平堆叠，有一个上一个按钮，一个指示总页数的文本，以及一个下一个按钮。
一个 select，其中包含希望在 table 上可视化的每页元素数，以及一个仅表示 "elements per page"
用于输入页码的文本输入，以及用于加载指定页面的转到按钮。
所有这些都必须水平排序。

在我看来，我是这样定义这些组件的：

<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>

但我得到的最终结果看起来像这样

导航按钮看起来完全脱机，select 太大并且将标签推到新行，看起来不错的是转到页面输入。

Bootstrap 我可以使用什么样的样式来实现我想要的外观？

Answer 1

最后我不得不放弃使用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>

现在我明白了：

如果需要，我可以给它添加一些颜色，我得到了一个漂亮的分页工具栏。

如何使用 Bootstrap 水平定位分页工具栏的元素？

How to horizontally position elements for a pagination toolbar using Boostrap?

html

css

styling

angularjs