CSS响应式分页

Question

我有一个项目https://ikeen.com/blog，根据在线文档，我在那里使用标准引导分页样式进行分页。然而，我不能让它在移动版本的一行上(没有换行)。这是分页的代码：

<nav aria-label="Page navigation">
    <ul class="pagination ml-3">
        <li class="page-item disabled"><a class="page-link">Назад</a></li>
        <li class="page-item active"><a class="page-link">1</a></li>
        <li class="page-item"><a class="page-link" href="blog?page_no=2">2</a></li>
        <li class="page-item"><a class="page-link" href="blog?page_no=3">3</a></li>
        <li class="page-item"><a class="page-link" href="blog?page_no=4">4</a></li>
        <li class="page-item"><a class="page-link" href="blog?page_no=5">5</a></li>
        <li class="page-item"><a class="page-link" href="blog?page_no=6">6</a></li>
        <li class="page-item"><a class="page-link" href="blog?page_no=2">Далее</a></li>
        <li class="page-item"><a class="page-link" href="blog?page_no=6">Последняя ››</a></li>
    </ul>
</nav>

对我来说，这看起来非常正常。然而，它在网站上看起来很糟糕。

​

如果你有时间查看网站，你会发现它在<div class="container>内部，所以它应该可以工作。我所做的一切都是根据文档进行的。你能在这方面帮我吗？

Answer 1

可以使用Bootstrap flex-wrap类为.pagination元素指定flex包装属性

<ul class="pagination flex-wrap ml-3">
    ...
</ul>