Bootstrap分页在手机端显示不全是因为默认横向排列且无折叠，需用媒体查询+display:none隐藏中间页码，保留首、末、当前及邻近页，并添加overflow-x:auto和-webkit-overflow-scrolling:touch确保可滚动。
Bootstrap 的 .pagination 在手机端显示不全，不是因为“页码太多”，而是它默认不做任何折叠——所有 <li> 强行横向排列，超出视口就被裁掉，用户既滑不动也点不到。
用媒体查询 + display: none 精准隐藏中间页码
直接删 DOM 或靠 JS 动态控制太重，CSS 是最轻量、可维护的解法。关键是保留首页、当前页、邻近页、末页，其余一律隐藏。
- 给分页容器加唯一 class，比如
class="pagination-mobile-aware"，避免污染全局.pagination - 在
@media (max-width: 576px)下，用:not()组合排除要保留的项：@media (max-width: 576px) { .pagination-mobile-aware 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-mobile-aware li:not(.keep-on-mobile) { display: none; }
必须补上 overflow-x: auto，否则 iOS 滑不动
只隐藏页码还不够。如果容器没设横向滚动，用户根本看不到被隐藏的页码，尤其 iOS 上默认禁用惯性滚动。
.pagination-mobile-aware { overflow-x: auto; -webkit-overflow-scrolling: touch; }- 别漏掉
-webkit-overflow-scrolling: touch，否则 iOS 滚动卡顿或失效 - 确保父容器没有
overflow: hidden干扰，否则滚动会被截断
为什么不能用 .d-none .d-sm-flex 这类工具类
Bootstrap 的响应式 display 工具类作用于整个分页容器，无法对单个 <li> 做差异化控制。
- 你没法只让第 5、6、7 页在小屏消失，同时保留第 1、4、8 和最后一页
-
.d-none会把整个分页栏干掉，.d-sm-flex只能控制是否显示，不能做“部分隐藏” - 细粒度页码控制必须靠自定义 CSS 选择器或 JS 动态增删 class
真正容易被忽略的是：隐藏页码后，<ul> 宽度仍可能撑开容器，导致布局错位。所以除了 display: none 和 overflow-x，还得检查父级是否设置了 width: 100% 或 flex-shrink: 0 —— 这些都会让横向滚动失效。
