直接加justify-content-center在手机上不管用，因为它是无断点类，小屏下页码挤压缩或换行，居中效果混乱；应使用justify-content-sm-center（≥576px生效），在375–575px窄屏保持左对齐以保障可用性。
为什么直接加 justify-content-center 在手机上不管用
因为 justify-content-center 是无断点类，它在所有屏幕宽度下都生效。但小屏（如 iPhone SE 的 375px）下，pagination 容器内页码太多、文字太宽，flex 会自动换行或压缩，此时“居中”只是居中一堆被挤变形甚至溢出的按钮，视觉上反而更乱。
真正起效的是 justify-content-sm-center——它从 sm 断点（≥576px）开始生效，意味着在典型小屏设备（375px–575px）上保持左对齐，保障可点击性和阅读流；只在 iPad mini、折叠屏展开态等稍宽场景才启用居中，符合真实交互逻辑。
- 类必须加在
<ul class="pagination"></ul>上，不是外层<nav></nav> - 别混用
justify-content-center和justify-content-sm-center，后者会覆盖前者 - 检查 computed 样式确认
.pagination的display确实是flex（Bootstrap v4.1+ / v5 默认如此，v3 不是） - 避免父级有
float、position: absolute或width: fit-content，这些会破坏 flex 布局
如何让分页按钮在手机上真正“好点”
移动端点击区域太小，不是 padding 没加，而是事件被拦截或热区没达标。iOS/Android 推荐最小触摸目标为 44×44px，而 pagination-sm 的 .page-link padding 仅约 6×12px，远不够。
- 给
.page-link加min-width: 44px和min-height: 44px - 或改 padding：比如
padding: 0.5rem 0.75rem（≈8×12px），再配合min-width - 检查父容器是否误设了
pointer-events: none或touch-action: none（常见于轮播、弹窗遮罩） - 用 Chrome DevTools 的「Computed」面板直接看实际生效值，别只信 CSS 文件
-
pagination-lg在手机上容易撑出屏幕，不推荐无脑使用
bootstrap-table 动态生成的分页怎么加居中
bootstrap-table 是 JS 动态插入 DOM，HTML 里写的 justify-content-sm-center 不会自动生效。
- 监听
onPostBody事件，在表格渲染完成后手动加类：$('ul.pagination').addClass('justify-content-sm-center') - 不要依赖
paginationVAlign: 'center'，旧版支持不稳定，新版基本弃用 - 如果页面有多个表格，建议加限定选择器，比如
$('div#myTable').find('ul.pagination').addClass(...) - 确保 JS 执行时机晚于 bootstrap-table 初始化完成
禁用状态在手机上要同时处理 disabled 和 aria-disabled
只写 HTML 的 disabled 属性，JS 动态切换时 aria-disabled 不会同步更新。结果是：视觉灰掉，但读屏软件（VoiceOver/TalkBack）仍读作“可点击”，违反无障碍要求。
- JS 启用/禁用时，必须成对操作：
el.setAttribute('disabled', 'true')+el.setAttribute('aria-disabled', 'true') - 恢复时也得两个都删：
el.removeAttribute('disabled')和el.removeAttribute('aria-disabled') - 别用
opacity: .5代替禁用状态，辅助技术完全感知不到
事情说清了就结束。最常被忽略的是：小屏下强行居中反而损害可用性，以及动态分页必须 JS 注入类——这两点不处理，其他调优都白搭。
