Bootstrap 4：从 Bootstrap3 迁移分页

Question

我正在从 BS3 移植一个应用程序，旧的寻呼机看起来像这样：

这是旧代码：

<nav>
    <ul class="pager">
        <li class="previous disabled"><a href="#"><span class="glyphicon glyphicon-arrow-left"></span></a></li>
        <li>1/402</li>
        <li class="next"><a href="#"><span class="glyphicon glyphicon-arrow-right"></span></a></li>
    </ul>
</nav>

使用 bootstrap 4 文档，我已经迁移到这个

<nav>
    <ul class="pagination">
            <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1"><span class="fa fa-arrow-left"></span></a></li>
        <li class="justify-content-center">1/395</li>
            <li class="page-item"><a class="page-link" href="#"><span class="fa fa-arrow-right"></span></a></li>
    </ul>
</nav>

渲染到这个...

任何人都可以帮忙，关于屏幕两端的按钮和圆形吗？

谢谢

编辑 1：在 ZimSystem 的帮助下，这几乎完成了，但仍然是一个渲染问题，按钮不是圆圈而是半个/圆圈

Answer 1

你可以这样做..

<nav>
    <ul class="pagination justify-content-between">
        <li class="page-item flex-last"><a class="page-link rounded-circle" href="#"><span class="fa fa-arrow-right"></span></a></li>
        <li class="justify-content-center">1/395</li>
        <li class="page-item disabled flex-first"><a class="page-link rounded-circle" href="#" tabindex="-1"><span class="fa fa-arrow-left"></span></a></li>
    </ul>
</nav>

justify-content-between 使 flexbox 分页拉伸整个宽度，然后 rounded-circle 使链接像 3.x.

一样圆润

http://www.codeply.com/go/TliFbeUKC0

Bootstrap 4：从 Bootstrap3 迁移分页

Bootstrap 4: migrating pagination from Bootstrap3

css

twitter-bootstrap-4

bootstrap-4