Bootstrap 4 分页组件的缩放与响应性异常问题

我懂你的困扰——Bootstrap 4的分页组件默认在空间不足时，会自动隐藏部分中间页码（也就是你遇到的只显示4-14页的情况），而不是让按钮跟着屏幕尺寸自适应缩放。要实现按钮随窗口缩小而同步变小的效果，我们可以通过自定义CSS调整来搞定，下面是具体方案：

1. 自定义响应式按钮样式 #

通过媒体查询，为不同屏幕尺寸的分页按钮设置更小的内边距和字体大小，让按钮能自适应收缩：

/* 针对移动端（屏幕宽度≤576px）调整分页按钮 */
@media (max-width: 576px) {
  .pagination .page-link {
    padding: 0.25rem 0.5rem; /* 减小按钮内边距 */
    font-size: 0.875rem; /* 缩小按钮字体 */
  }
}

/* 针对平板等中等屏幕（可选）微调 */
@media (max-width: 768px) {
  .pagination .page-link {
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
  }
}

这段代码会在屏幕宽度小于576px（Bootstrap的移动端断点）时，自动缩小分页按钮的尺寸，让所有16个页码按钮都能在小屏幕上显示，不会被默认逻辑截断隐藏。

2. 强制显示全部页码（如果需要） #

如果你的分页代码里有Bootstrap默认的响应式隐藏逻辑（比如通过JS动态隐藏页码），可以添加下面的CSS强制所有页码项保持显示：

/* 禁止分页项被隐藏，强制全部显示 */
.pagination .page-item {
  display: inline-block !important;
}

注意：如果页码数量确实很多（比如16页），极小屏幕上可能还是会换行，但至少所有页码都会完整展示，不会凭空消失。

3. 可选：搭配紧凑版分页类 #

Bootstrap 4自带.pagination-sm类，可以直接生成更小的基础分页按钮，你可以把它和上面的自定义CSS结合使用：

<ul class="pagination pagination-sm">
  <!-- 你的分页按钮代码 -->
</ul>

这个类会默认让按钮更紧凑，再配合媒体查询的自适应调整，移动端的显示效果会更理想。

内容的提问来源于stack exchange，提问作者user3657152