Question

我正在开发一个AngularJS项目，在我的一个视图中，我有一个将在其上实现分页的表。我希望分页的控件如下：

水平堆叠，有一个Previous按钮，一个指示页面总页数的文本，以及一个Next按钮。
一个选项，其中包含每个页面上可视化的每页元素数量，以及一个文本只是说＆＃34;每页元素＆＃34;
用于输入页数的文本输入，以及用于加载指示页面的“转到”按钮。
所有这些都必须水平排序。

我在我的视图中定义了这样的组件：

<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可以使用什么样的样式来实现我想要的外观？

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>

现在我认为这是：

如果有必要，我可以添加一些颜色，我只是有一个漂亮的分页工具栏。

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

1 个答案: