https://angular-ui.github.io/bootstrap/#/pagination class="pagination pagination-lg" 在 bootstrap 中不工作 4

Question

我是 angularjs 的新人。我正在使用 https://angular-ui.github.io/bootstrap/#/pagination。我有一些问题：样式 class="pagination pagination-lg" 不工作，我正在使用 bootstrap 版本 4。帮助 me.Thanks

error image here

index.html

<div>
        <pre>You are currently on page {{userCtrl.page}}</pre>
        <ul uib-pagination total-items="userCtrl.totalElements" ng-model="userCtrl.page" max-size="10000" class="pagination pagination-lg"
            boundary-links="true" num-pages="userCtrl.totalPages">
        </ul>
    </div>

userController.js

module.exports = function (UserService) {
    var _this = this;
    _this.users = [];
    _this.page = [];
    _this.size = [];
    _this.totalElements = [];
    _this.totalPages = [];

    _this.list = function () {
        UserService.getUsersPage().then(function (response) {
            console.log(response);
            _this.users = response.content;
            _this.page = response.number;
            _this.size = response.numberOfElements;
            _this.totalElements = response.totalElements;
            _this.totalPages = response.totalPages;
        })
    };
    _this.list();
};

Answer 1

你检查过分页组件 DOM 结构了吗？ uiBootstrap 使用 3.3.6 版本进行测试，因此比较两个版本：

v3:

<nav aria-label="Page navigation">
  <ul class="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="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

v4:

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

我确定您看到 v3 中的元素缺少 css 类 ;)

https://angular-ui.github.io/bootstrap/#/pagination class="pagination pagination-lg" 在 bootstrap 中不工作 4

https://angular-ui.github.io/bootstrap/#/pagination class="pagination pagination-lg" not working in bootstrap 4

css

angularjs

angular-ui-bootstrap

bootstrap-4