Bootstrap分页必须严格使用.nav > .pagination > .page-item > .page-link嵌套结构，漏层则样式和交互失效；.page-item控制状态（active/disabled），定制需覆盖四种状态并用前缀类避免污染，居中用justify-content-center，切勿破坏flex布局和margin基础规则。
Bootstrap分页条的 HTML 结构必须用 .pagination + .page-item + .page-link
直接写 <ul class="pagination">，里面每个页码或“上一页”都得套一层 <li class="page-item">，再包一个 <a class="page-link"> ——漏掉任意一层，CSS 就不生效，JS 交互也可能失效。常见错误是把 .page-link 直接写在 <ul> 里，或者忘记 .page-item 这个中间容器。
示例最小可用结构：
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
-
.page-item是布局和状态控制的关键：禁用（.disabled）、激活（.active）都挂在它身上，不是.page-link - Bootstrap 5 不再支持
.pager（已移除），翻页样式需手动用justify-content-between或 Flex 控制 - 如果用在
bootstrap-table等插件中，分页 DOM 是 JS 动态插入的，直接写 CSS 有时不生效，得加!important或用事件委托监听插入后重写样式
改背景色/边框必须覆盖四种状态：默认、hover、active、focus
只改 .page-link 的 background-color，鼠标一悬停就变回 Bootstrap 默认色；点一下当前页又没高亮——因为 .page-item.active .page-link 和 .page-link:hover 是独立规则，漏一个就断层。
正确写法（推荐用自定义包裹类避免全局污染）：
.my-pagination .page-link {
background-color: #4a6fa5;
border-color: #3a5a8c;
color: #fff;
}
.my-pagination .page-link:hover {
background-color: #3a5a8c;
border-color: #2a4a7c;
}
.my-pagination .page-item.active .page-link {
background-color: #0d47a1 !important;
border-color: #0a3a82;
color: #fff;
}
.my-pagination .page-link:focus {
box-shadow: 0 0 0 0.2rem rgba(13, 71, 161, 0.25);
outline: none;
}
- 务必用
.my-pagination这类前缀类包裹，否则改的是全站所有.page-link，容易影响其他组件（比如模态框里的按钮） - Bootstrap 5 使用 CSS 变量（如
--bs-pagination-bg），但变量只在根级生效，动态主题切换时才值得用；日常定制直接写死值更可控 -
:focus状态常被忽略，导致键盘用户 tab 到页码时看不到焦点框，不符合无障碍要求
让分页居中或两端对齐的三种可靠方式
Bootstrap 5 没有内置 .pagination-center 这类工具类，靠 Flex 布局最稳。
- 居中：给
<ul class="pagination">加justify-content-center（需确保父容器是 flex 容器，或自己设display: flex） - 左对齐：默认就是左对齐，无需额外 class
- “上一页”左贴、“下一页”右贴：去掉
.pagination的默认 flex，改用justify-content-between，并把首尾两项单独包裹（或用ms-auto/me-auto微调） - 注意：不要用
text-align: center，因为.pagination是 flex 容器，text-align对子项无效
自定义样式后分页失效或错位的典型原因
样式改完发现页码堆成一排、间距消失、圆角没了——大概率是覆盖时破坏了 Bootstrap 的基础盒模型或 display 规则。
- 别动
.pagination的display: flex和flex-wrap: wrap，否则换行逻辑崩坏 - 别删
.page-item的margin（默认是0 0.125rem），这是页码间距来源；想加大间距请用gap（Flex 容器属性）或重设margin - 如果用了
border-radius却只看到左右圆角，检查是否漏写了.page-link的overflow: hidden（某些版本需要） - CDN 加载顺序错误：你的 CSS 必须在 Bootstrap CSS 之后加载，否则规则被覆盖
