优先用自定义class包裹分页容器（如），再通过后代选择器调整.page-link的padding、font-size和line-height，并重置.page-item的margin-left以消除边框重叠；禁用原生outline改用box-shadow保障可访问性；确保aria-current="page"动态渲染到位，避免用disabled属性误用于标签。
Bootstrap 分页组件默认样式太“胖”，怎么压缩高度和间距
默认 .pagination 的 padding、line-height 和 font-size 都偏大，尤其在紧凑型后台或移动端表格下方显得突兀。直接覆盖类比写 CSS 更可靠，不建议改 Bootstrap 源码或用 !important 堆砌。
- 优先用自定义 class 包裹分页容器，例如
<nav class="pagination-sm"></nav>，再通过后代选择器降权控制：.pagination-sm .page-link { padding: 0.25rem 0.5rem; font-size: 0.875rem; } -
.page-item默认有margin-left: -1px，导致首项左侧多出 1px 边框重叠 —— 若你禁用边框或用圆角，记得同步重置margin-left: 0 - Chrome 下
button类型的.page-link会自带outline聚焦样式，视觉上像多了一圈虚线；用outline: 0+box-shadow: 0 0 0 2px rgba(0,123,255,.25)替代更符合可访问性要求
为什么 aria-current="page" 不生效，键盘导航仍卡住
Bootstrap 分页依赖 aria-current="page" 标识当前页，但若你用 JS 动态替换 .page-item 内容（比如用 Vue/React 渲染），容易漏掉这个属性，导致屏幕阅读器无法识别当前位置，键盘 Tab 也跳过当前项。
- 确保每次渲染都显式写入：
<li class="page-item"><a class="page-link" aria-current="page">3</a></li>，不能只靠 class 名判断 - 不要用
disabled属性禁用当前页链接（如<a disabled></a>）——a标签不支持disabled，它会被忽略，且失去语义；正确做法是保留链接，加aria-disabled="true"和tabindex="-1" - 若用 JS 切换当前页，记得调用
element.focus()到新激活的.page-link，否则键盘焦点还停在旧位置
Bootstrap 5 分页与 Bootstrap 4 在 justify-content 行为上的差异
Bootstrap 5 把分页容器的对齐方式从 .pagination 自身的 justify-content 移到了父级 .pagination 的 flex 设置里，而 BS4 是直接在 .pagination 上设 justify-content: center。升级时若没重测，会发现分页突然左对齐了。
- BS4：直接给
.pagination加justify-content-end就能右对齐 - BS5：需确保父容器是 flex 容器（如
<nav class="d-flex justify-content-end"></nav>），因为.pagination本身已移除display: flex的默认设置（改为由父级控制） - 兼容写法：统一用
<nav class="d-flex justify-content-center"><ul class="pagination mb-0">...</ul></nav>，避免版本差异干扰
分页条响应式断裂：小屏下按钮堆叠或溢出容器
原生 Bootstrap 分页没有断点逻辑，.page-link 固定宽高，在 xs 下文字换行或按钮被截断很常见，尤其带「上一页」「下一页」文字按钮时。
- 删掉固定
min-width（BS5 中.page-link默认有min-width: 2rem），用flex: 0 0 auto让内容决定宽度 - 对超小屏（
max-width: 480px）单独隐藏文字，只留图标：@media (max-width: 480px) { .page-link:not(.page-link-icon) { display: none; } .page-link-icon::before { content: "«"; } } - 若用 SVG 图标代替文字，注意
vertical-align: middle和height: 1.5em对齐，否则图标上下错位
aria-current 是否存活、Tab 是否可达、小屏是否撑破容器 —— 这三处一漏，用户实际体验就断掉了。
