bootstrap手机端分页显示不全的根本原因是小屏下未折叠处理，导致页码水平溢出；应通过媒体查询+display:none隐藏中间页码，并设置overflow-x: auto支持滑动。
Bootstrap 默认分页（.pagination）在手机端显示不全，根本原因不是“内容太多”，而是其默认布局在小屏幕下未做折叠或截断处理——ul.pagination 仍尝试水平铺开所有 li，超出视口宽度后被裁剪或溢出隐藏，用户根本滑不到末尾页码。
手机端分页被裁剪的典型表现
常见现象包括：只显示前 3–4 个页码，右侧页码和「Next」按钮消失；左右滑动无效（容器未设 overflow-x: auto）；点击区域错位（li 宽度压缩导致触控热区过小）。
用媒体查询 + display: none 隐藏非关键页码
不推荐直接删 DOM 或改 JS 逻辑，最轻量、可维护的方式是 CSS 控制显示。核心思路：保留首页、当前页、邻近页、末页，其余中间页码在小屏下隐藏。
- 给分页容器加唯一 class，比如
class="pagination-smart"，避免污染全局.pagination - 在
@media (max-width: 576px)下，用:nth-child()精准隐藏中间冗余项：@media (max-width: 576px) { .pagination-smart li:not(:first-child):not(:last-child):not(.active):not(.page-item.active) ~ li:not(:first-child):not(:last-child) { display: none; } } - 更稳妥的做法是显式标记要保留的项：
<li class="page-item keep-on-mobile">1</li>，再写.pagination-smart li:not(.keep-on-mobile) { display: none; } - 务必补上
.pagination-smart { overflow-x: auto; -webkit-overflow-scrolling: touch; }，否则 iOS 上无法横向滚动查看隐藏项
为什么不用 .d-none .d-sm-flex 这类响应式工具类
Bootstrap 的 display 工具类（如 .d-none、.d-sm-flex）作用于整组分页容器，无法对单个页码项做差异化控制。你没法只让第 5、6、7 页在手机上消失，而保留第 1、4、8、最后页——这类细粒度控制必须靠自定义 CSS 或 JS 动态增删 class。
容易忽略的触控与可访问性细节
隐藏页码只是视觉层面，不能破坏语义结构：
- 不要用
visibility: hidden或opacity: 0，它们仍占位且屏幕阅读器可读 - 用
display: none是正确选择，但需确认它不会导致分页控件整体高度塌缩（可加min-height保底） - 如果用了
aria-label="第 X 页"，隐藏后记得同步移除对应属性，避免读屏器误报 - iOS Safari 对
ul内部display: none的重排有时有延迟，建议加transform: translateZ(0)强制硬件加速
真正难的不是“怎么藏”，而是“藏哪些”和“藏完是否还能自然跳转”。手动维护页码可见性逻辑会随数据量增长迅速失控，中大型项目建议改用支持智能省略（如 ...5 6 <strong>7</strong> 8 9...）的分页组件，而非硬塞 CSS 折叠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
