如何通过CSS自定义Bootstrap 5分页符的间距和大小？-css教程-PHP中文网

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

如何通过css自定义bootstrap 5分页符的间距和大小？

分页项之间间距怎么调？别碰 margin，用 CSS 变量

Bootstrap 5 的 .page-item 之间默认有 0.25rem 水平间隙，但它不是靠 margin 实现的，而是由 --bs-pagination-margin-x 控制（注意：该变量在 v5.3+ 中引入，早期版本未暴露）。直接写 .page-item { margin-right: 0.5rem; } 会破坏响应式对齐，尤其在小屏下容易换行错位。

正确做法是覆盖变量：

在 Bootstrap CSS 加载后，用 :root 或更具体的作用域重设：:root { --bs-pagination-margin-x: 0.5rem; }
若只改某一分页组件，限定作用域更安全：.my-pagination { --bs-pagination-margin-x: 0.375rem; }
不支持该变量的旧版（如 v5.0–v5.2），只能用选择器强制微调：.my-pagination .page-item:not(:last-child) { margin-right: 0.375rem; }，但需同步检查 .page-item:last-child 是否多出空白

分页按钮大小怎么统一改？优先用内置类，慎用自定义 height

.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;
局部替换：给 <nav></nav> 加自定义 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 部署。

下载

常见误操作及后果：

.page-link.px-3 → 文字左右撑开，但按钮整体宽度不受控，.active 状态下背景色可能溢出圆角
.page-item.mx-1 → 在小屏下触发 flex 换行，Previous 和 Next 按钮被挤到下一行
试图用 .pagination.gap-2 → .pagination 不是 flex 容器，gap 属性无效

移动端紧凑布局怎么实现？别写媒体查询，用内置工具类

Bootstrap 5 内置 .pagination-sm 已针对小屏优化过字体和 padding，但如果你需要比 sm 更紧凑（比如嵌入卡片标题栏），不用手写 @media (max-width: 576px)。

更可靠的做法：

组合使用 .pagination-sm + 自定义变量：.pagination-sm { --bs-pagination-padding-y: 0.25rem; --bs-pagination-padding-x: 0.5rem; }
用 gap 替代传统 margin 思路（仅限现代浏览器）：.pagination { display: flex; gap: 0.125rem; }，但必须确保父容器未设 text-align: center，否则 gap 会失效
删掉非必要项来“视觉压缩”：隐藏 Previous/Next 文字，改用图标 + aria-label，减少水平占用空间