Bootstrap分页不支持断点尺寸类，如.pagination-lg-sm不存在；所有尺寸类（.pagination-lg/.pagination-sm）全局生效，需用媒体查询手动实现响应式控制，并同步调整padding、line-height、min-width等确保触摸热区与可访问性。
Bootstrap分页不支持断点尺寸类，比如 .pagination-lg-sm 不存在
Bootstrap 官方没提供类似 .pagination-lg-sm 或 .pagination-md 这种带断点前缀的尺寸类。所有尺寸控制（.pagination-lg、.pagination-sm）都是全局生效的，写上就全屏应用，不会随屏幕宽度自动切换。
常见错误是试图混用：.pagination-lg .pagination-sm 或 .pagination-lg-md——这些类名根本不存在，浏览器会忽略或导致样式冲突。
- 想在桌面大屏用
.pagination-lg，小屏回退到默认尺寸？必须手动加媒体查询 -
.pagination本身是中等尺寸，不是“基础类”，别和.pagination-lg同时写在一个<ul>上 - Bootstrap 5.3+ 仍维持该设计，没有计划加入响应式尺寸类（截至 2026 年 7 月）
用媒体查询实现不同断点下的分页尺寸
真要按断点切尺寸，得自己写 CSS，不能依赖 Bootstrap 内置类。关键是把尺寸规则限定在对应视口范围内，避免污染其他设备。
例如：桌面 ≥992px 用大号，移动端保持默认（或单独设小号）：
.pagination {
font-size: 1rem;
padding: 0.5rem 0.75rem;
}
@media (min-width: 992px) {
.pagination .page-link {
font-size: 1.25rem;
padding: 0.75rem 1.5rem;
line-height: 1.5;
border-radius: 0.3rem;
}
}
- 不要只改
font-size，padding和line-height必须同步调，否则文字贴顶或溢出 - 如果用了
.pagination-sm，它内部的font-size: 0.875rem会被媒体查询覆盖，所以建议直接删掉内置尺寸类，全量控制 - 注意
.page-item的margin也要响应式调整，否则窄屏下页码挤成一坨
为什么不能靠 mx-sm-* 类来“间接缩放”分页
mx-sm-3 这类 margin 类只控制外边距，对分页内部尺寸毫无影响。有人试过给 <nav> 加 scale(0.8) 或 transform: scale()，这会导致：
- 点击热区（hit area）不随视觉缩放同步变化，移动端点不准
- 辅助技术（如 VoiceOver）读取的仍是原始尺寸，ARIA 属性错乱
- 字体渲染模糊，尤其在高 DPI 屏幕上
- 与
.active或.disabled状态样式不匹配，圆角、背景色错位
移动端真正要调的不是“尺寸比例”，而是触摸热区
用户说“不同断点下尺寸比例”，实际痛点常是：小屏上按钮太小、点不中。但 .pagination-sm 在 iPhone 上反而让热区更小（padding: 0.375rem 0.75rem ≈ 6×12px），远低于 44×44px 最低推荐值。
- 优先给
.page-link加min-width: 44px和min-height: 44px - 用
@media (max-width: 576px)单独放大移动端padding，比如padding: 0.625rem 1rem - 检查父容器是否设了
pointer-events: none或touch-action: none，这类拦截比尺寸问题更致命 -
disabled和aria-disabled必须 JS 同步更新，否则读屏软件误判可操作性
断点尺寸的本质不是“让字变大变小”，而是确保人在不同设备上能可靠点中、看清楚、听明白——热区、语义、断点逻辑，三者缺一不可。
