直接修改 .badge 类的 font-size 不生效是因为 CSS 优先级被 Bootstrap 更具体的规则（如 .badge-primary、:not(:disabled)）覆盖；应使用双类名选择器、自定义类（如 .badge-lg）重置 font-size、padding 和 line-height，或在 Bootstrap 4.4+ 中通过 :root 变量统一控制。
直接修改 .badge 类的 font-size 不生效？原因在这
Bootstrap 4 的 .badge 默认带 font-size: 0.75rem，但如果你在自定义 CSS 里直接写 .badge { font-size: 14px; } 却没变化，大概率是 CSS 优先级被覆盖了。Bootstrap 用的是 !important 吗？不是——它靠的是更具体的规则：比如 .badge-primary、.badge-pill 等组合类会叠加声明，或通过 :not() 选择器（如 .badge:not(:disabled)）提升权重。
解决思路不是硬怼 !important，而是让选择器至少和 Bootstrap 原生的一样具体：
- 用
.badge.badge-primary这类双类名选择器覆盖单类名 - 或在你自己的样式表中确保加载顺序在 Bootstrap CSS 之后
- 避免只写
.badge，除非你确认它没被其他规则覆盖（可打开 DevTools 查看“Computed”面板里的实际生效值）
推荐做法：用自定义类 + 覆盖关键属性
最稳妥的方式是不改原始 .badge，而是加一个自定义类（比如 .badge-lg），并显式重置所有可能影响字体大小的属性：
.badge-lg {
font-size: 0.875rem; /* 比默认 0.75rem 大一点 */
padding: 0.35em 0.65em; /* 配套调整内边距，避免文字贴边 */
line-height: 1; /* 防止行高拉伸导致高度异常 */
}然后在 HTML 中这样用：<span class="badge badge-primary badge-lg">New</span>。注意两点：
立即学习“前端免费学习笔记（深入）”；
-
line-height必须设为1或接近值，否则 Bootstrap 的line-height: 1可能被继承链干扰 - 如果用了
.badge-pill，它的border-radius和padding会和新font-size不协调，建议同步调整padding值
全局统一改法：重定义 CSS 变量（仅限 Bootstrap 4.4+）
Bootstrap 4.4 开始部分组件支持 CSS 变量（虽然徽章不是原生支持项，但你可以自己引入）：
:root {
--badge-font-size: 0.875rem;
}
<p>.badge {
font-size: var(--badge-font-size);
padding: calc(var(--badge-font-size) <em> 0.4) calc(var(--badge-font-size) </em> 0.75);
}这种方式的好处是后续只需改一个变量就能批量更新，但要注意：
- 必须用
:root或html作用域，不能只写.badge内部定义变量 -
calc()中的乘法单位要一致（rem× 无单位数），否则会解析失败 - 旧版 Bootstrap 4.0–4.3 不支持该写法，需升级或放弃
移动端适配时容易忽略的点
在响应式项目中，如果希望徽章在小屏下自动缩放，别只依赖媒体查询改 font-size。Bootstrap 4 的 .badge 默认没有 min-width，当 font-size 缩小时，内容可能撑不开容器，导致背景色“塌陷”。建议补上：
@media (max-width: 576px) {
.badge-lg {
font-size: 0.75rem;
min-width: 24px; /* 强制最小宽度，保证视觉完整性 */
}
}另外，iOS Safari 对 rem 在缩放页面时有渲染延迟，若用户手动放大网页，徽章可能暂时错位——这种场景下，用 em 相对父元素更稳，但需确保父容器字体大小可控。
