直接加.pagination-lg在手机上反而更难点，因其全局放大不区分设备，padding仅约12×24px，远低于44×44px推荐触摸热区，且易撑出容器；需配合媒体查询、min-width/min-height及可访问性状态同步才能真正适配移动端。
为什么直接加 .pagination-lg 在手机上反而更难点
因为 .pagination-lg 是全局放大，不区分设备——它在 320px 宽的屏幕上照样把 .page-link 的 padding 设成 0.75rem 1.5rem（约 12px × 24px），但实际触摸热区仍远低于推荐的 44×44px；更糟的是，它可能撑出容器、触发横向滚动，或遮挡相邻内容。而 .pagination-sm 在小屏上把 padding 压到仅约 6px × 12px，视觉紧凑了，手指却点不准。
用媒体查询手动切尺寸，别依赖内置类的响应式断点
Bootstrap 本身没提供 .pagination-sm-md-lg 这类响应式尺寸类。它的 sm/lg 是静态类，不随视口变化。真要适配，得自己写媒体查询，且优先按容器宽度而非屏幕宽度判断——因为分页常嵌在卡片或表格里，容器才是真实可用空间。
- 给外层
<nav>加自定义 class，比如responsive-pagination - 在 CSS 里写：
@media (max-width: 768px) { .responsive-pagination .page-link { padding: 0.75rem 1rem; min-width: 44px; min-height: 44px; border-radius: 4px; } .responsive-pagination .page-item:not(:first-child) { margin-left: 4px; } } - 桌面端保持默认：不写任何尺寸类，让
.pagination自然渲染
.pagination-sm 和 .pagination-lg 到底改了哪些值
它们不是只调 font-size，而是一套协同缩放规则。单独覆盖其中一项（比如只改 padding）会导致文字贴顶、圆角不匹配、点击热区错位。
-
.pagination-lg：默认font-size: 1.25rem、padding: 0.75rem 1.5rem、line-height: 1.5、border-radius: 0.3rem -
.pagination-sm：默认font-size: 0.875rem、padding: 0.375rem 0.75rem、line-height: 1.5、border-radius: 0.2rem - 所有值都基于 rem，受
html { font-size }影响——如果项目设了html { font-size: 18px }，那1.25rem就是 22.5px，不用额外调整
移动端点击区域必须手动补 min-width/min-height
Bootstrap 的尺寸类只控制视觉尺寸，不保证可触达性。iOS/Android 推荐最小触摸目标为 44×44px，而 .pagination-sm 的原始 padding 算下来只有约 6×12px，.pagination-lg 也仅约 12×24px——都不达标。
- 必须显式加
min-width: 44px和min-height: 44px到.page-link - 同时调高
line-height（比如设为2），否则文字会垂直偏上 - 检查父容器是否误设了
pointer-events: none或touch-action: none，这两个属性会让 padding 再大也没用 - 禁用项要同步更新
disabled和aria-disabled，否则读屏软件无法识别状态
