在引导程序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被删除了。我在Bootstrap 4分页中找到了很多例子，所以我更改了下面的代码：

<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，但似乎改为<div>。有没有一种方法可以在引导程序4中使用pagination类来实现我在引导程序3中所做的事情？

Answer 1

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

只需将justify-content-center更改为justify-content-between即可。

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

虽然我找不到直接的解决方案，但我使用了中描述的替代方案https://github.com/e107inc/e107/issues/2962带有Bootstrap 4 Buttons和Bootstrap 4Flex。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
select {
border: 0px;
outline: 0px;
}
</style>
<div class="d-flex justify-content-between">
<div class="pager-button btn btn-outline-primary disabled">
<a>&larr; Newer</a>
</div>
<div class="pager-button btn btn-outline-primary">
<a>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>
</div>
<div class="pager-button btn btn-outline-primary">
<a>Older &rarr;</a>
</div>
</div>

注意：请随意删除pager-button类。

而且这个按钮有很多样式，在其中选择很方便。