这是bootstrap故意设计的边框合并策略：.page-item默认设margin-left: -1px，使相邻.page-link边框视觉合并为单线；若禁用边框或修改圆角，需同步重置margin-left: 0，否则导致错位；chrome下button类型.page-link的outline需用outline: 0加box-shadow替代以兼顾可访问性。
为什么 .page-item 的 margin-left: -1px 会导致边框重叠
这不是 bug，是 Bootstrap 故意设计的边框合并策略：每个 .page-item 默认带 margin-left: -1px，目的是让相邻 .page-link 的边框视觉上“合并”成一条线，避免双线感。但一旦你禁用了边框（比如加了 border: none）或改了圆角（border-radius），这个负边距就失去意义，反而造成内容错位、文字偏移甚至左侧多出空白。
- 检查 computed styles 中
.page-item的margin-left是否仍为-1px—— 如果你用自定义 class 覆盖了它但没同步重置，就会残留错位 - 若用
border: 0或outline: 0清除了边框，必须配套写.page-item { margin-left: 0; } -
.pagination-lg和.pagination-sm会继承并放大这个负边距效果，尺寸类切换时容易漏掉重置
Chrome 下 button 类型的 .page-link 自带 outline 导致“虚线重叠”
当 .page-link 是 <button></button> 时，Chrome 默认渲染 outline: -webkit-focus-ring-color auto 1px，叠加在你设置的 border 上，看起来像边框变粗或出现双层虚实线。这不是重叠，是 focus 状态下的可访问性样式干扰了视觉。
- 别直接用
outline: none—— 这会破坏键盘导航用户的聚焦提示 - 正确做法是覆盖为
outline: 0+box-shadow: 0 0 0 2px rgba(0,123,255,.25)，既保持可访问性又避免视觉冲突 - 如果项目用了自定义主题色，记得同步更新
box-shadow中的 rgba 值，否则 focus 状态会“消失”
自定义分页容器 class 时后代选择器权重不足
很多人用 <nav class="pagination-sm"></nav> 包裹分页，再写 .pagination-sm .page-link 调样式，结果发现边框重叠没被修复 —— 根本原因是 Bootstrap 原生 CSS 中 .page-item 的 margin-left: -1px 权重更高，你的后代选择器没压过它。
- 优先用更具体的选择器，比如
.pagination-sm .page-item { margin-left: 0; }，而不是只改.page-link - 避免在
.pagination外层加!important—— 它会污染所有分页实例，尤其在嵌套或动态插入时难调试 - 如果用 Sass，直接在变量层改
$pagination-margin（Bootstrap 5.3+ 支持），比硬覆盖更干净
margin-left: -1px + border 状态变更 + outline 渲染三者叠加的结果。调一个地方，得同步看另外两个是否还生效。
