直接修改 .badge 的 border-radius 和 padding 即可，但需确保自定义样式在 bootstrap css 之后加载、选择器权重足够（如 .my-app .badge 或 .badge.custom-badge），并注意响应式断点与 sass 变量覆盖策略。
直接改 .badge 的 border-radius 和 padding 就行，但要注意覆盖时机和选择器权重
Bootstrap 的 .badge 默认用的是 border-radius: 0.375rem（即 6px）和 padding: 0.35em 0.65em。想改圆角或内边距，最稳妥的方式是写在 Bootstrap CSS 加载之后的自定义样式里，并确保选择器足够具体。
- 用
.badge单独写可能被 Bootstrap 的默认规则覆盖（尤其 v5+ 使用了!important的部分场景） - 推荐加一层上下文，比如
.my-app .badge或直接用.badge.custom-badge - 如果只改某类 badge（如
.badge-primary），得同时覆盖对应变体的 padding，因为不同颜色类可能没继承 padding
.custom-badge {
border-radius: 4px; /* 改成你想要的值，比如 4px、8px 或 0 */
padding: 0.25em 0.5em; /* 注意单位用 em 更适配字体缩放 */
}
Bootstrap 5 中 badge 的 padding 是响应式断点控制的，改前先确认是否要统一所有断点
v5 的 .badge 在 sm 及以上断点用了 padding: 0.35em 0.65em，而 xs（min-width: 0）下是 padding: 0.25em 0.5em。如果你的页面不依赖小屏特殊缩放，直接覆盖所有断点更省事：
- 不要只写
@media (min-width: 576px)，否则小屏 badge 会回退到默认值 - 想彻底统一，就用无媒体查询的规则，或者用
!important（仅当覆盖失败时谨慎使用） - 注意：Bootstrap 的
.badge-pill（已废弃）曾用border-radius: 50%，现在改用.rounded-pill工具类，别混淆
用 Sass 变量重定义（适合项目已引入 Bootstrap 源码）
如果你用的是 Sass 版本（比如通过 npm 安装并自己编译），改变量是最干净的方式：
- 圆角由
$badge-border-radius控制（默认0.375rem） - 水平内边距由
$badge-padding-x控制（默认0.65em），垂直由$badge-padding-y（默认0.35em） - 修改后重新编译 CSS，所有
.badge实例自动生效，包括.badge-primary等变体
// _custom-variables.scss $badge-border-radius: 0.25rem; $badge-padding-y: 0.25em; $badge-padding-x: 0.5em;
用工具类组合替代硬改样式（轻量、可复用）
Bootstrap 5 自带 .rounded-<em> </em> 和 .p- 工具类，能快速调整单个 badge：
-
rounded-1→border-radius: 0.25rem；rounded-2→0.5rem；rounded-0→0 -
p-1→padding: 0.25rem；px-2→padding-left/right: 0.5rem；注意 badge 默认用em单位，工具类用rem，混用时视觉可能微调 - 示例：
<span class="badge bg-primary rounded-1 px-2 py-1">New</span> - 缺点：每个 badge 都得手动加类，不适合全局统一风格
真正麻烦的不是改哪几个属性，而是得判断清楚——你改的是单个实例、一类组件，还是整个设计系统的一致性。选错方式（比如在 JS 里动态改 style）容易后续维护失焦。
