<p>Bootstrap 5 徽章变胶囊形必须加 .rounded-pill 类，因 .badge-pill 已被移除；.badge 仅负责基础样式，颜色需搭配 .bg-* 类，且需注意父元素 font-size 对徽章缩放的影响。</p>
Bootstrap 5 徽章默认圆角很小，想变胶囊形必须加 .rounded-pill
Bootstrap 5 的 .badge 默认是带轻微圆角的矩形（border-radius: 0.25rem），不是视觉上明显的“胶囊”。很多人以为加 .badge-pill 还有效，其实这个类在 Bootstrap 5 中已被移除——官方只保留了 .rounded-pill 作为统一的胶囊修饰符。
实操建议：
- 要胶囊形，必须显式添加
.rounded-pill，例如：<span class="badge bg-primary rounded-pill">New</span> - 不要尝试用
style="border-radius: 50px"覆盖，会破坏垂直居中和内边距比例 -
.rounded-pill自带额外水平 padding，所以文字不会贴边，这是设计意图，不是 bug
.badge 本身不带颜色，必须配 .bg-* 类才可见
Bootstrap 5 彻底弃用了 .badge-primary 这类组合类。现在 .badge 只负责基础尺寸、圆角和行内显示行为，颜色完全由 .bg-* 工具类控制。
常见错误现象：
- 写了
<span class="badge">5</span>却看不到徽章——因为没背景色，文字和父容器同色 - 误用
.text-primary以为能上色——这只改文字色，背景仍是透明 - 用
.bg-dark但文字看不清——此时需同步加.text-white或.text-light
推荐搭配（语义清晰且对比足够）：.bg-primary、.bg-success、.bg-danger、.bg-warning、.bg-info、.bg-light.text-dark、.bg-dark.text-white
徽章嵌入按钮或标题时，字体大小自动缩放，但可能失衡
Bootstrap 徽章使用 font-size: 0.75em 和 line-height: 1，并依赖父元素字号做相对缩放。这在 <h1> 或 <button> 里通常没问题，但容易在以下场景出问题：
- 父元素用了自定义
font-size（比如14px），徽章会缩成10.5px，小得难以辨认 - 按钮本身是
.btn-sm，徽章却还是按默认基准缩放，显得偏大 - 嵌套在 flex 容器中未设
align-items: center，徽章上下位置偏移
解决办法优先级：
- 先检查父元素是否意外重置了
font-size，如有，给徽章加font-size: 0.875em覆盖 - 避免在
.btn-sm里硬塞徽章；如必须，用.badge-sm这类自定义类（Bootstrap 5 不提供，需自己写） - 确保徽章父容器有
display: inline-flex或至少vertical-align: middle
Tailwind 用户别抄 Bootstrap 写法，.badge 不是内置类
Tailwind CSS 官方没有 .badge 这个工具类。所有所谓 “Tailwind badge” 都是社区约定写法，本质是一组手动拼装的工具类。
典型可用组合（兼容性好、语义明确）：
-
inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full—— 基础结构 - 再加颜色，如
bg-blue-500 text-white或bg-gray-200 text-gray-800 - 若需响应式缩放，用
text-xs sm:text-sm，别依赖父元素继承
注意：直接复制 Bootstrap 的 HTML 结构（比如 <span class="badge bg-primary">）在 Tailwind 下完全无效，浏览器只会当普通 span 渲染。
