Bootstrap怎么设置分页组件Pagination在移动端自动隐藏部分页码-Bootstrap教程-PHP中文网

bootstrap分页在手机端显示不全是因为默认横向排列且无折叠，需用媒体查询+display:none隐藏中间页码，保留首、末、当前及邻近页，并添加overflow-x:auto和-webkit-overflow-scrolling:touch确保可滚动。

bootstrap怎么设置分页组件pagination在移动端自动隐藏部分页码

Bootstrap 的 .pagination 在手机端显示不全，不是因为“页码太多”，而是它默认不做任何折叠——所有 <li> 强行横向排列，超出视口就被裁掉，用户既滑不动也点不到。

用媒体查询 + `display: none` 精准隐藏中间页码

直接删 DOM 或靠 JS 动态控制太重，CSS 是最轻量、可维护的解法。关键是保留首页、当前页、邻近页、末页，其余一律隐藏。

给分页容器加唯一 class，比如 class="pagination-mobile-aware"，避免污染全局 .pagination

在 @media (max-width: 576px) 下，用 :not() 组合排除要保留的项：

@media (max-width: 576px) {
  .pagination-mobile-aware li:not(:first-child):not(:last-child):not(.active):not(.page-item.active) ~ li:not(:first-child):not(:last-child) {
    display: none;
  }
}

更稳妥的做法是显式标记：<li class="page-item keep-on-mobile">1</li>，再写 .pagination-mobile-aware li:not(.keep-on-mobile) { display: none; }

必须补上 `overflow-x: auto`，否则 iOS 滑不动

只隐藏页码还不够。如果容器没设横向滚动，用户根本看不到被隐藏的页码，尤其 iOS 上默认禁用惯性滚动。

VPS Bootstrap

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

下载

.pagination-mobile-aware { overflow-x: auto; -webkit-overflow-scrolling: touch; }
别漏掉 -webkit-overflow-scrolling: touch，否则 iOS 滚动卡顿或失效
确保父容器没有 overflow: hidden 干扰，否则滚动会被截断