Bootstrap怎么设置分页组件Pagination在不同屏幕下的尺寸大小控制-Bootstrap教程-PHP中文网

直接加.pagination-lg在手机上反而更难点，因其全局放大不区分设备，padding仅约12×24px，远低于44×44px推荐触摸热区，且易撑出容器；需配合媒体查询、min-width/min-height及可访问性状态同步才能真正适配移动端。

bootstrap怎么设置分页组件pagination在不同屏幕下的尺寸大小控制

为什么直接加 `.pagination-lg` 在手机上反而更难点

因为 .pagination-lg 是全局放大，不区分设备——它在 320px 宽的屏幕上照样把 .page-link 的 padding 设成 0.75rem 1.5rem（约 12px × 24px），但实际触摸热区仍远低于推荐的 44×44px；更糟的是，它可能撑出容器、触发横向滚动，或遮挡相邻内容。而 .pagination-sm 在小屏上把 padding 压到仅约 6px × 12px，视觉紧凑了，手指却点不准。

用媒体查询手动切尺寸，别依赖内置类的响应式断点

Bootstrap 本身没提供 .pagination-sm-md-lg 这类响应式尺寸类。它的 sm/lg 是静态类，不随视口变化。真要适配，得自己写媒体查询，且优先按容器宽度而非屏幕宽度判断——因为分页常嵌在卡片或表格里，容器才是真实可用空间。

VPS Bootstrap

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

下载

给外层 <nav></nav> 加自定义 class，比如 responsive-pagination

在 CSS 里写：

@media (max-width: 768px) {
  .responsive-pagination .page-link {
    padding: 0.75rem 1rem;
    min-width: 44px;
    min-height: 44px;
    border-radius: 4px;
  }
  .responsive-pagination .page-item:not(:first-child) {
    margin-left: 4px;
  }
}

桌面端保持默认：不写任何尺寸类，让 .pagination 自然渲染

`.pagination-sm` 和 `.pagination-lg` 到底改了哪些值

它们不是只调 font-size，而是一套协同缩放规则。单独覆盖其中一项（比如只改 padding）会导致文字贴顶、圆角不匹配、点击热区错位。

.pagination-lg：默认 font-size: 1.25rem、padding: 0.75rem 1.5rem、line-height: 1.5、border-radius: 0.3rem
.pagination-sm：默认 font-size: 0.875rem、padding: 0.375rem 0.75rem、line-height: 1.5、border-radius: 0.2rem
所有值都基于 rem，受 html { font-size } 影响——如果项目设了 html { font-size: 18px }，那 1.25rem 就是 22.5px，不用额外调整