Bootstrap 4 分页缩放/响应能力

Question

如此 处 所述，我在 Bootstrap 4 中使用分页组件。

我能够根据需要成功地浏览我的页面，但是我注意到导航按钮似乎没有像我预期的那样响应屏幕尺寸的变化。例如，我目前正在处理 16 个页面，当我在移动设备上查看此页面或将浏览器调整为更小的尺寸时，我只看到第 4 页到第 14 页的页面按钮。我想我希望按钮按比例缩小为页面宽度减小了，但这似乎并没有发生。

细节：

• 我已经根据 Bootstrap 的需要为视口添加了元标记。
• 我正在使用容器 div 来包含我的分页列表。
• 我正在使用 Bootstrap CDN，但它正在正确加载。
• 我没有包含代码示例，因为我正在按照 Bootstrap 示例进行操作。

谢谢你的帮助 ：）

原文由 user3657152 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据场景的不同，一个巧妙的技巧是 flex 帮助类 .flex-wrap 和 .pagination 一起让你的列表为较小的设备打破多行。

 <ul class="pagination flex-wrap">
    <li class="page-item"><a class="page-link" href="#">A</a></li>
    <li class="page-item"><a class="page-link" href="#">B</a></li>
    ...
    <li class="page-item"><a class="page-link" href="#">Z</a></li>
</ul>

当您没有太多页面并且希望它们在不滚动等情况下全部可见时，这很有用。

原文由 Dario Muñoz 发布，翻译遵循 CC BY-SA 4.0 许可协议