加 pagination-lg 在手机上更难点击是因为它全局放大按钮，导致溢出视口、遮挡内容；其 padding 和 font-size 不保证触摸热区≥44×44px，反而可能缩小热区；需用媒体查询单独控制 min-width 和 padding。
为什么加了 pagination-lg 在手机上反而更难点击？
不是类没生效，而是它把按钮撑得太大，容易超出视口宽度、遮挡内容，甚至触发横向滚动。Bootstrap 的尺寸类是全局生效的，pagination-lg 在所有断点下都放大，不区分设备类型。
-
pagination-lg会设font-size: 1.25rem、padding: 0.75rem 1.5rem，在 iPhone 竖屏（375px）下，5 个页码可能直接溢出 - 移动端真正需要的不是“视觉变大”，而是“触摸热区 ≥44×44px”——
pagination-lg不保证这点，pagination-sm反而让热区缩到约 6×12px - 别依赖尺寸类解决点击问题；优先用媒体查询单独控制
.page-link的min-width和padding
怎么让分页在桌面居中、移动端左对齐？
不能写 justify-content-center justify-content-sm-start——后者会覆盖前者。Bootstrap 的断点类是“覆盖式生效”，不是叠加。
- 正确写法是：
justify-content-md-center（仅在 ≥768px 生效），小屏自动回退到 flex 默认的flex-start - 必须加在
<ul class="pagination">上，不是外层<nav>；确保 computed 样式里display是flex - 如果用了
bootstrap-table这类 JS 动态生成分页的库，HTML 里写的类会被忽略，得用 JS 注入：$('ul.pagination').addClass('justify-content-md-center')
想实现“手机小、平板中、桌面大”，必须自己写 CSS
Bootstrap 没提供 pagination-sm-md-lg 这种响应式尺寸类。它的 pagination-lg 和 pagination-sm 都是静态、互斥的。
- 推荐做法：给外层
<nav>加自定义 class，比如class="responsive-pagination" - 然后用媒体查询分段控制：
@media (max-width: 576px) { .responsive-pagination .page-link { padding: 0.5rem 0.75rem; min-width: 44px; } } @media (min-width: 576px) and (max-width: 992px) { .responsive-pagination .page-link { padding: 0.625rem 1rem; } } @media (min-width: 992px) { .responsive-pagination .page-link { padding: 0.75rem 1.5rem; } } - 记得同步调
line-height和border-radius，否则文字悬空或圆角不匹配
根字体改了，pagination-lg 就失效？
是的。pagination-lg 依赖 rem 计算：font-size: 1.25rem 在 html { font-size: 12px } 下只等于 15px，视觉上几乎看不出变化。
- 打开 Chrome DevTools，选中
.page-link，看「Computed」里的font-size是否真为 20px（默认根字体 16px × 1.25） - 检查是否有全局
body { font-size: 12px }或html { font-size: 18px }——前者压缩尺寸，后者会自动放大所有 rem 值 - 删掉所有同时写的
pagination和pagination-lg；这两个类互斥，共存会导致部分样式被覆盖
