解决 Sitemap 分页按钮自动换行问题

抱歉兄弟！是我之前会错意了，误以为你想保持单行不换行。确实，如果页码非常多（比如几十页），一直往右侧拉伸不换行或者逼着用户去横向滚动体验确实很差，分页按钮自动换行（Drop to next line）才是标准、合理的做法。

要让分页按钮在空间不足时自动折行，且折行后上下行之间不粘连，我们只需要在 CSS 的 .pagination 类中加上 flex-wrap: wrap;，并微调 gap 属性即可。

🛠️ 完美的 CSS 修复方案

请将您当前模板（sitemap.html）中的 .pagination 部分 CSS 修改为以下代码：

/* ================= 分页模块 ================= */
.pagination {
  margin-top: 3rem;
  display: flex;
  /* 核心：允许子元素在空间不足时自动换行 */
  flex-wrap: wrap; 
  justify-content: center;
  /* 调整间距：第一个参数是行与行（上下）的间距，第二个参数是列与列（左右）的间距 */
  gap: 0.75rem 0.5rem; 
  padding: 0 1rem; /* 左右留一点边距，防止贴边 */
}

.page-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-main);
  text-align: center;
  min-width: 2.5rem; /* 保证页码较少时也有足够的点击区域 */
  transition: all 0.2s ease;
}

.page-btn.active, .page-btn:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

💡 为什么这样改最好？

1. flex-wrap: wrap;：这是 Flex 布局中控制换行的灵魂属性。默认是 nowrap（不换行，硬撑或缩放），改为 wrap 后，浏览器在检测到屏幕宽度不够容纳下一个页码时，会自动把后面的按钮放到下一行。
2. gap: 0.75rem 0.5rem;：标准的 gap 双参数写法。第一个参数 0.75rem 是行间距（Row Gap），当按钮换到第二行、第三行时，上下行之间会有美观的间隙，不再粘在一起；第二个参数 0.5rem 是列间距（Column Gap），保持左右按钮的距离。
3. min-width: 2.5rem;：给页码一个最小宽度，防止个位数（如 "1"）和十位数（如 "10"）宽度不一致导致视觉上参差不齐，同时更符合谷歌移动设备友好度（Mobile-Friendly）的点击尺寸要求。

这样修改后，不论是 5 页还是 50 页，在手机端还是 PC 端，都会整齐划一、优雅地自动排版换行了！