替换寻呼机和引导程序4中的引导程序3的上一个/下一个类

Question

我曾经在Bootstrap 3中使用pager类来实现分页。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<style>
select {
    border: 0px;
    outline: 0px;
}
</style>

<ul class="pager">
    <li class="previous disabled">
        <a>&larr; Newer</a>
    </li>

    <li>
        <span>
            Page:
            <select name="pagelist" style="margin-top: 0px;">
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            of 3
        </span>
    </li>

    <li class="next">
        <a>Older &rarr;</a>
    </li>
</ul>

这些天我升级到Bootstrap 4并找到pager is dropped。我在pager中找到了很多示例，因此我在下面更改了代码：

Bootstrap 4 Pagination

如您所见，

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style>
select {
    border: 0px;
    outline: 0px;
}
</style>

<ul class="pagination justify-content-center">
    <li class="page-item previous disabled">
        <a class="page-link">&larr; Newer</a>
    </li>

    <li class="page-item">
        <a class="page-link">Page:
            <select name="pagelist" style="margin-top: 0px;">
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            of 3
        </a>
    </li>

    <li class="page-item next" style="float:right">
        <a class="page-link">Older &rarr;</a>
    </li>
</ul>

和previous类也被删除，在该官方教程中我没有找到示例。我试图向他们添加next样式，但无效。

我在float中发现了类似的问题，但似乎改为了https://github.com/e107inc/e107/issues/2962。有没有办法在Bootstrap 4中使用<div>类来实现我在Bootstrap 3中所做的工作？

Answer 1

------更新----

只需将pagination更改为justify-content-center就可以了。

显示代码

justify-content-between

------原始答案----------

尽管我没有找到直接的解决方案，但我使用

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style>
select {
    border: 0px;
    outline: 0px;
}
</style>

<ul class="pagination justify-content-between">
    <li class="page-item previous disabled">
        <a class="page-link">&larr; Newer</a>
    </li>

    <li class="page-item">
        <a class="page-link">Page:
            <select name="pagelist" style="margin-top: 0px;">
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            of 3
        </a>
    </li>

    <li class="page-item next">
        <a class="page-link">Older &rarr;</a>
    </li>
</ul>

和https://github.com/e107inc/e107/issues/2962中描述的替代方法。

Bootstrap 4 Buttons

注意：请随意删除Bootstrap 4 Flex类。

并且按钮有很多样式，可以方便地在其中选择。