根本原因是.pagination默认为d-flex但未设flex-wrap:wrap，窄屏下页码被强制单行排列撑宽容器，导致换行溢出；同时.page-link的padding和文字宽度在375px屏上易超限，引发堆叠、滚动条和热区错位。
为什么分页在小屏上会换行甚至横向溢出
根本原因不是页码太多，而是 .pagination 默认是 d-flex 容器，但没配 flex-wrap: wrap，窄屏下所有 .page-item 被强行压在同一行，撑宽容器导致横向滚动；同时，.page-link 的默认 padding 和文字宽度在 375px 屏幕上极易超限。常见现象包括：iPhone SE 上页码堆叠、右侧出现滚动条、点击热区错位。
加 flex-wrap: wrap 并控制单行最大项数
不能只靠居中类解决溢出，必须让 flex 容器“允许换行”并限制每行承载量：
- 给
<ul class="pagination"></ul>显式加flex-wrap: wrap（Bootstrap 5.3+ 默认不设） - 用 CSS 限定单行最多显示 5 个页码（含 ellipsis）：
.pagination { max-width: 100%; } .pagination .page-item { flex: 0 0 auto; } - 对移动端（
@media (max-width: 576px)）隐藏部分页码：.pagination .page-item:not(:first-child):not(:last-child):not(.active) { display: none; }，保留首页、末页、当前页和省略号
避免 justify-content-sm-center 加剧换行错位
justify-content-sm-center 在 ≥576px 生效，本意是安全居中，但它对已换行的 .pagination 无效——flex 主轴对齐只作用于当前行，换行后每行独立居中，视觉上反而更乱。真正要的是“不挤、不溢、可点”：
- 删掉所有
justify-content-*类，改用text-center包裹整个<nav></nav>（对非 flex 子项有效） - 确保父
<nav></nav>没设float或width: fit-content，否则text-center失效 - 如果必须用 flex 居中，只在未换行场景下启用：
@media (min-width: 768px) { .pagination { justify-content: center; } }
增大触摸热区 + 防止文字撑开按钮
换行问题常被误认为纯布局问题，实际一半来自点击体验差导致用户反复滑动尝试——而滑动本身就会触发横向溢出：
- 给
.page-link设最小尺寸：min-width: 44px; min-height: 44px;（iOS/Android 最小推荐值） - 禁用长文本撑开：
.page-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - 检查是否意外设置了
pointer-events: none（常见于 modal 遮罩层穿透逻辑） - 动态分页（如
bootstrap-table）需 JS 注入样式：$('ul.pagination').css({ 'flex-wrap': 'wrap', 'max-width': '100%' });
最易忽略的一点：别在 .pagination 外层加 overflow-x: hidden。它会裁剪掉换行后的第二行页码，用户根本看不到“下一页”按钮——真正的防护应该在内容生成侧（控制页码数量）和容器约束侧（max-width + flex-wrap），而不是粗暴截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
