html - Bootstrap 4 分页缩放/响应能力

Question

我在 Bootstrap 4 中使用分页组件，如说明的那样 here .

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

详细信息:

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

感谢您的帮助:)

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>

当您没有太多页面并且希望无需滚动等即可看到所有页面时，这很有用。