Badge在移动端变小是因为响应式断点重置了font-size：Bootstrap默认在xs断点（

Badge在移动端变小是因为响应式断点重置了font-size

bootstrap默认对.badge设置了响应式字体缩放：在sm（≥576px）及以上断点用0.75rem，但在xs（0.625rem（即10px）。这不是bug，是设计意图——但实际中常显得太小、难读。

覆盖移动端badge字体大小的三种可靠方式

优先推荐直接覆盖CSS变量或类，避免破坏Bootstrap的响应式逻辑：

• 用自定义类强制统一字号：

  .badge-lg-xs { font-size: 0.875rem !important; }

  然后在HTML里写<span class="badge bg-primary badge-lg-xs">New</span>
• 修改CSS变量（Bootstrap 5.3+）：

  :root { --bs-badge-font-size: 0.875rem; }

  这样所有.badge在所有断点都生效，包括xs
• 针对性覆盖xs断点：

  @media (max-width: 575.98px) { .badge { font-size: 0.875rem !important; } }

  注意媒体查询上限必须严格小于sm断点值

别用text-sm这类工具类强行放大

Bootstrap的text-sm对应font-size: 0.875rem，但它只在sm及以上生效，对xs无效；同理text-xs不存在。硬加这类类不会改变xs下的表现，反而可能因优先级冲突导致样式错乱。

VPS Bootstrap

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

下载

如果用了Bootstrap Icons配合Badge，图标尺寸也要同步调

比如<i class="bi bi-bell"></i><span class="badge bg-danger">3</span>，图标默认是1rem，而xs下badge缩到0.625rem，视觉比例就失衡。建议统一控制：

.badge-icon { font-size: 0.875rem; }

并给图标也加上该类，或用style="font-size: 0.875rem"内联控制。

真正要改的只是font-size和必要时的padding，其他如line-height或border-radius通常无需动——改多了容易在不同断点间出缝或溢出容器。