Bootstrap怎么设置分页组件Pagination在大屏显示数字小屏显示箭头-Bootstrap教程-PHP中文网

bootstrap4分页无法通过内置类实现大屏显数字、小屏仅留箭头，需手动添加媒体查询：给中间页码加.page-link-number类，在max-width:768px下设display:none，保留首尾箭头并增强其触摸热区（min-width/min-height≥44px），同时确保aria-label和焦点顺序无障碍。

bootstrap怎么设置分页组件pagination在大屏显示数字小屏显示箭头

怎么让分页在大屏显示数字、小屏只留箭头？

直接靠 Bootstrap 内置类做不到——.pagination 没有“条件性隐藏页码”的开关。得手动加媒体查询 + 结构微调，核心是让中间页码在小屏下 display: none，但保留首尾的上一页/下一页按钮。

别用 .pagination-sm 或 .pagination-lg 试图“间接控制”，它们只缩放尺寸，不控制显隐
必须把页码项（如 <li class="page-item"><a class="page-link">2</a></li>）和箭头项（上一页/下一页）分开写，否则没法单独隐藏
给所有中间页码（非首尾）加一个统一 class，比如 class="page-link-number"，方便批量控制

在 CSS 中写：

@media (max-width: 768px) {
  .page-link-number {
    display: none;
  }
}

确保上一页/下一页按钮仍保有 aria-label（如 aria-label="Previous"），否则小屏下无障碍支持会断掉

为什么用 `display: none` 而不是 `visibility: hidden`？

display: none 真正移除元素布局空间，避免小屏下页码挤成一排溢出容器；visibility: hidden 仍占位，容易导致父容器高度异常或换行错乱。

VPS Bootstrap

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

下载

如果用了 JS 动态生成分页 HTML，记得在生成时就给数字页码加上 page-link-number 类，别依赖 JS 后补——否则首次渲染可能闪一下
Bootstrap 的 .page-item 默认是 flex 项，display: none 后其他项会自动重排，无需额外调 justify-content
测试时重点看 iPhone SE 和 Android 小屏机型，有些浏览器对 flex + display: none 的处理略有差异

移动端只剩箭头时，点击区域够不够？

只剩箭头后，按钮物理尺寸往往变小——默认 .page-link 在 .pagination-sm 下 padding 仅约 6px × 12px，远低于 44×44px 触摸安全区。

必须给箭头按钮单独加大热区：

.page-item:first-child .page-link,
.page-item:last-child .page-link {
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
}

别只改 font-size，否则文字悬空——line-height 必须同步设为与 min-height 匹配（如 line-height: 1.5 配 min-height: 44px 可能不够，需实测）
检查是否父容器有 pointer-events: none（常见于模态框遮罩层未关闭），否则再大的热区也点不动

事情说清了就结束。真正麻烦的不是写那几行 media query，而是确保隐藏页码后，焦点顺序不跳、读屏软件仍能说出“第 3 页，当前页”，以及箭头按钮在各种小屏上都稳稳接住手指——这三处漏一点，体验就断了。