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 doc，我已迁移到此

<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使弹性框分页拉伸整个宽度，然后rounded-circle使链接的舍入方式像3.x一样。

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