bootstrap 5 中 badge 默认尺寸不可直接缩放，需通过自定义类（如 .badge-sm/.badge-lg）同步调整 font-size、padding 和 border-radius 才能保持视觉协调，推荐在自定义 css 中覆盖而非修改全局样式。
bootstrap 5 中 badge 默认尺寸不可直接缩放，需覆盖 css
bootstrap 5 的 .badge 类默认使用固定 font-size: 0.75em 和 padding，没有内置的 sm/lg 尺寸类（不像按钮或表单控件）。直接加 text-sm 或 fs-6 不生效，因为 padding 和 line-height 未同步调整，会导致文字被裁切或上下错位。
- 必须同时修改
font-size、padding和border-radius才能保持视觉协调 - 推荐用自定义类（如
.badge-sm）而非直接改.badge全局样式，避免影响其他位置 - 若项目已用 Sass，可在变量层覆盖
$badge-font-size和$badge-padding-y，但需重新编译
手写 CSS 调整 Badge 大小最稳妥
在自定义 CSS 文件中添加以下规则即可立即生效，无需改动 Bootstrap 源码：
.badge-sm {
font-size: 0.625rem; /* = 10px */
padding: 0.25rem 0.4rem;
border-radius: 0.125rem;
}
<p>.badge-lg {
font-size: 0.875rem; /<em> = 14px </em>/
padding: 0.375rem 0.6rem;
border-radius: 0.25rem;
}</p>
注意：Bootstrap 5 使用 rem 单位，建议按比例缩放——font-size 缩放后，padding-y 通常取其 0.6–0.7 倍值，padding-x 略大一点保证文字不贴边。
用 utility 类组合也能应急，但有局限
Bootstrap 自带的间距和字体工具类可临时微调，比如：
<span class="badge bg-primary p-1 px-2 fs-7">New</span>
但问题明显：
-
fs-7（0.8125rem）无法精确控制，且无对应fs-8或更小级数 -
p-1和px-2可能破坏 badge 圆角比例，尤其在bg-dark等高对比色下更显突兀 - 响应式场景下（如移动端需进一步缩小），utility 类难以统一维护
警惕 !important 和继承干扰
如果自定义样式没生效，大概率是被 Bootstrap 的 specificity 覆盖了。检查是否：
- 把 CSS 放在 Bootstrap 样式表之后加载
- 没加
!important（仅当调试确认是优先级问题时才加，生产环境应靠选择器权重解决） - 父容器设置了
font-size，导致 badge 的 rem 计算值意外变大（例如父级font-size: 1.25rem会让0.75em实际变成 15px）
真正难处理的不是改大小本身，而是让不同尺寸 badge 在各种背景色、行内布局、响应式断点下都保持清晰可读且不溢出——这需要测试真实 DOM 上下文，不能只看孤立示例。
