Badge边框与背景色不匹配时，需用自定义类显式重置background-color（加!important）、设置border及同步padding（如.35em .6em），推荐border: 1px solid currentColor配合color控制边框色，并复用--bs-primary-rgb等CSS变量保持调色一致。
Badge边框颜色和背景色不匹配怎么办
bootstrap默认的.badge只提供纯背景色（如.bg-primary），没有内置“带边框+透明背景”或“边框色≠背景色”的组合样式。直接叠加.border类会失效，因为.badge的background-color和color是强绑定的，且border默认被覆盖。
用自定义CSS覆盖默认样式最稳妥
Bootstrap 5+ 的.badge使用display: inline-flex和align-items: center，修改时需同时重置background-color、border、color和padding，否则文字位置偏移或边框不显。
- 必须用
!important覆盖Bootstrap的background-color（尤其在v5.3+中） - 推荐用
border: 1px solid currentColor配合color控制边框色，避免硬编码颜色值 - 加
padding: .35em .6em保持与原生一致的内边距，否则高度塌陷
.badge-outline-primary {
background-color: transparent !important;
color: #0d6efd !important;
border: 1px solid #0d6efd;
padding: .35em .6em;
}
如何复用Bootstrap调色系统避免写死颜色
如果项目已用Sass，直接在变量层扩展更干净；若只用CSS，可提取Bootstrap的CSS变量（如--bs-primary）复用，避免维护两套颜色值。
- Bootstrap 5.3+ 支持CSS变量：
border-color: var(--bs-primary) - 但
color不能直接用var(--bs-primary)，需额外声明（因.badge默认设color: #fff） - 不建议用
.text-primary等文本工具类——它只改文字色，不影响border或background
为什么.border + .bg-transparent组合无效
因为Bootstrap的.badge本身有background-color声明（如.bg-primary { --bs-bg-opacity: 1; background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) }），.bg-transparent的background-color: transparent会被其覆盖，除非加!important。
-
.border类默认border-width: 1px，但.badge的line-height和font-size会让边框看起来细得看不见 - 移动端下
rem缩放可能导致边框模糊，建议统一用px单位 - 暗色模式下若未适配
@media (prefers-color-scheme: dark)，边框可能消失
background-color并加!important，以及手动补全padding和border——漏掉任一都可能让徽章看起来“没变”或者“变形”。
