如何通过CSS调整Bootstrap分页组件的间距和样式？-css教程-PHP中文网

分页项间距应改--bs-pagination-margin-x变量而非margin；bootstrap 5.3+支持该变量，旧版需用.page-item:not(:last-child)微调。

如何通过css调整bootstrap分页组件的间距和样式？

分页项间距别碰 margin，改 --bs-pagination-margin-x 变量

Bootstrap 5.3+ 把 .page-item 之间的水平间隙抽成了 CSS 自定义变量 --bs-pagination-margin-x，默认值是 0.25rem。直接写 .page-item { margin-right: 0.5rem; } 会破坏响应式对齐，小屏下容易换行错位。

正确做法是覆盖变量：

全局调整：在 Bootstrap CSS 加载后，用 :root { --bs-pagination-margin-x: 0.5rem; }
局部调整：给分页容器加自定义 class，比如 <nav class="pagination my-pager"></nav>，再写 .my-pager { --bs-pagination-margin-x: 0.375rem; }
旧版（v5.0–v5.2）不支持该变量，只能退回到选择器微调：.my-pager .page-item:not(:last-child) { margin-right: 0.375rem; }，但必须同步检查 :last-child 是否多出空白

分页按钮大小别硬设 height，优先用 padding + font-size 组合

.pagination-lg 和 .pagination-sm 是 Bootstrap 提供的尺寸开关，它们联动调整 font-size、padding 和 border-radius，不是单纯调 height。硬写 .page-link { height: 40px; } 会导致文字垂直居中偏移、line-height 失配、:hover 状态视觉跳变。

推荐方案：

全局统一：在 :root 中重设变量，例如 --bs-pagination-padding-y: 0.5rem、--bs-pagination-padding-x: 1rem、--bs-pagination-font-size: 0.875rem
局部替换：加自定义 class 如 class="pagination pagination-custom"，再用高权重选择器覆盖：.pagination-custom .page-link { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
绝对避免设置固定 height——它会压制 padding 和 line-height 的协同效果，导致 active 状态下边框“浮起”或文字截断

为什么 px-2、mx-1 这类工具类对分页没用？

.page-item 是 display: inline-flex，而 .page-link 是其子元素；所有内置间距工具类（如 px-2）作用于块级或内联元素内部，对 .page-item 的盒模型影响极小。你加了 .page-item.px-2，实际只是给 flex 容器加了左右 padding，但间隙仍由 --bs-pagination-margin-x 或默认 margin 主导。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

调试时可直接看 computed styles，重点确认 .page-item 的 margin-inline-end 值是否被变量生效，而不是反复试工具类。

bootstrap-table 分页样式怎么单独改？

bootstrap-table 的分页是 JS 动态生成的，DOM 结构和原生 Bootstrap 分页一致，但 class 名可能被封装或延迟注入。直接用 $(".page-link") 选不到，因为节点还没渲染出来。

实操建议：

等表格初始化完成后再操作：$table.on("load-success.bs.table", function() { ... })
用更具体的选择器定位，比如 .bootstrap-table .pagination .page-link，避免被全局样式覆盖
如果仍无效，检查是否启用了 paginationVAlign: "top" 或 "both"，这类配置会让分页渲染到表格外层容器，需向上找父级 .fixed-table-container 或 .bootstrap-table
最稳妥的方式：在 bootstrap-table 初始化时通过 classes 选项注入自定义 class，例如 classes: "table table-sm my-table"，再用 .my-table .page-link 覆盖样式