大屏显示数字、小屏只留箭头需用媒体查询+js动态替换dom：在max-width:575.98px下，用js将.pagination子节点替换为仅含上/下一页箭头的两个.page-item，同步设置disabled、aria-disabled、tabindex及44×44px触摸热区，并监听onpostbody和onpagechange确保状态实时更新。
大屏显示数字、小屏只留箭头，得靠媒体查询 + JS 动态切换 DOM
Bootstrap Pagination 本身不支持“大屏显示页码数字、小屏只显示上/下一页箭头”这种条件渲染逻辑。它只负责样式，不控制 DOM 结构是否出现。所谓“小屏隐藏数字”，不是加个 d-none d-sm-block 就能解决——因为页码项（.page-item）是连续生成的，直接隐藏中间项会导致前后箭头错位、flex 布局塌陷，甚至破坏 aria-current 和键盘导航流。
真正可行的做法是：保留原生分页结构用于大屏，再用 JS 在小屏下动态替换为仅含箭头的极简结构，并确保可访问性属性同步。
- 用
@media (max-width: 575.98px)检测小屏（即 Bootstrap 的xs断点），触发 DOM 替换逻辑 - 保留原
<nav></nav>容器和aria-label，只替换内部<ul class="pagination"></ul>的子节点 - 新结构必须包含两个
.page-item：上一页和下一页，且当前不可用时要同时设disabled和aria-disabled="true" - 别用
« / »文本硬编码——改用带aria-label的 SVG 或图标字体，例如：<svg aria-label="Previous page">...</svg> - 替换后手动绑定点击事件，避免依赖原始
.page-link的 href 行为（否则小屏下仍会跳顶）
为什么不能只用 d-none 类隐藏中间页码
常见错误是给中间页码加 d-none d-sm-inline-block，以为能“小屏隐藏、大屏显示”。但问题在于：
-
.page-item是 flex 子项，隐藏部分项后，剩余项的margin和flex-grow未重算，导致箭头按钮位置漂移 - 屏幕阅读器仍会遍历所有
.page-item，即使视觉隐藏了，也会读出“1, 2, 3, …, 下一页”，语义混乱 - 键盘 Tab 导航顺序被打断：隐藏项仍占 tabindex 位置，焦点会“跳空”或卡住
- 当页码总数动态变化（如搜索后只剩 2 页），隐藏规则失效，小屏可能只剩一个箭头甚至无按钮
bootstrap-table 场景下怎么安全替换分页结构
如果分页由 bootstrap-table 动态生成，它的 onPostBody 和 onPageChange 是唯一可靠钩子。不能在初始化时一次性替换，必须每次页码刷新后都重置：
- 监听
onPostBody：确保 DOM 已插入，再检查窗口宽度并执行替换 - 监听
onPageChange：页码变更后，重新判断当前是否为第一页/最后一页，并更新箭头的disabled状态 - 替换前先缓存原始页码总数和当前页，避免因 DOM 清空丢失状态
- 新插入的
.page-link必须显式设置tabindex="0"，否则键盘无法聚焦 - 禁用状态要同时操作：
el.setAttribute('disabled', 'true')和el.setAttribute('aria-disabled', 'true')，缺一不可
小屏箭头的点击热区必须单独加固
只显示两个箭头时，用户依赖它们完成全部翻页操作，热区容错率更低。原生 .page-link 的 padding 在 pagination-sm 下只有约 6×12px，远低于 44×44px 最小触摸标准。
- 给小屏下的
.page-link单独加min-width: 44px和min-height: 44px，不要只调padding - 用
line-height配合height确保图标垂直居中，避免文字或 SVG “悬空” - 检查父容器是否误设
touch-action: none（常见于轮播图或弹窗遮罩层），它会彻底拦截点击 - 禁用箭头时，除了视觉灰掉，还要加
pointer-events: none，否则手指滑动可能误触
最易被忽略的是：小屏箭头结构一旦替换，就脱离了 Bootstrap 原生状态管理。所有激活、禁用、焦点、读屏反馈，都得你手动维护——这不是样式问题，是交互契约的重建。
