Bootstrap分页组件通过.pagination-lg或.pagination-sm类调整尺寸，二者同步修改font-size、padding、line-height和border-radius；不可与默认.pagination共存，且需注意根字体大小影响及外层布局干扰。
bootstrap分页组件怎么改尺寸？用.pagination-lg或.pagination-sm
bootstrap 5 的分页组件不支持直接设 font-size 或 padding 类名来缩放，必须用内置尺寸类。默认是中等大小（.pagination），大号和小号分别靠 .pagination-lg 和 .pagination-sm 控制。
这两个类会同时调整：font-size、padding、border-radius 和 line-height，不是只调某一项——所以别试图单独覆盖 font-size，否则容易错位或点击热区变小。
-
.pagination-lg：适用于后台列表页、数据看板等需要高可点击性的场景 -
.pagination-sm：适合嵌入卡片底部、侧边栏分页、移动端紧凑布局 - 不能和
.pagination同时写在同一个<nav></nav>标签上，否则样式冲突；只留一个尺寸类即可
为什么加了.pagination-sm但按钮没变小？
常见原因是父容器或自定义 CSS 强制重置了 font-size，比如全局设了 body { font-size: 12px }，而 Bootstrap 的 .pagination-sm 是基于 rem 计算的（默认 0.875rem ≈ 14px），如果根字体被压缩，它也会同比缩小，但视觉上可能“不够明显”。
- 检查是否在
:root或html上改过font-size；Bootstrap 尺寸类依赖它 - 用浏览器开发者工具看实际计算出的
padding和font-size值，确认是否被其他规则覆盖 - 避免在分页内部元素（如
<a></a>或<span></span>）上手动加style="font-size:12px"，会破坏行高对齐
自定义尺寸要不要写 CSS？什么时候必须写？
Bootstrap 没提供 .pagination-xs 或任意值缩放，真要超小（比如 10px 字号）或非标准比例，就得自己写 CSS。但注意：这不是“覆盖一下 padding 就行”，得同步处理几个关键点。
- 必须同时改
.page-link的padding、font-size、line-height和border-radius - 记得给
.page-item的margin缩小，否则间距还是默认的 - 如果用了
.active或.disabled状态，它们的背景色/边框也要适配新尺寸，否则看起来突兀 - 示例最小化写法：
.pagination-xss .page-link { padding: 2px 6px; font-size: 0.75rem; line-height: 1.2; border-radius: 2px; } .pagination-xss .page-item:not(:first-child) { margin-left: 2px; }
响应式分页尺寸怎么切？
Bootstrap 本身不提供像 .pagination-sm-md-lg 这样的响应式尺寸类，得自己组合媒体查询。别用 sm/md 断点直接套在分页上——因为分页通常嵌在容器里，更适合按容器宽度判断。
- 推荐做法：给外层
<nav></nav>加个自定义 class，比如.responsive-pagination，再在 CSS 里用@media (max-width: 576px)切换尺寸类效果 - 避免在 JS 里动态切换 class，分页 DOM 一般不频繁变动，纯 CSS 更稳
- 移动端慎用
.pagination-lg：在窄屏上容易换行或溢出，.pagination-sm反而更安全
<nav aria-label="..."></nav> 里，而这个 <nav></nav> 的 display 或 flex 设置会影响子项对齐，一动尺寸就错位。调之前先确认外层没加奇怪的布局规则。
