Bootstrap 5 中徽章变胶囊形应使用 .badge-pill 类；.rounded-pill 是通用圆角类，但非徽章专用，且需元素高度匹配，否则半圆失效。
Bootstrap徽章默认是矩形，怎么变胶囊？
直接加 rounded-pill 类就行——这是 Bootstrap 5+ 内置的通用圆角类，作用是把左右两端设为「半圆」，前提是元素本身有足够高度（否则圆角会塌陷）。徽章（badge）默认行内显示、带 padding 和 background，天然适配这个类。
为什么加了 rounded-pill 没生效？
常见原因不是类名写错，而是被其他样式覆盖或尺寸不匹配：
-
badge元素若被包裹在flex或grid容器中，且父容器设置了align-items: center以外的值，可能导致徽章高度被压缩，rounded-pill的半圆效果失效 - 自定义 CSS 中写了
border-radius: 0.25rem或类似固定值，会覆盖rounded-pill的border-radius: 50rem - 用的是 Bootstrap 4 —— 它没有
rounded-pill，得手动加style="border-radius: 50rem;"或升级到 v5+
rounded-pill 和 rounded-3 有什么区别？
本质都是控制圆角，但设计意图不同：
-
rounded-pill是「语义化」类，专为胶囊造型设计，值固定为50rem（足够大，确保左右成半圆） -
rounded-3是「尺度化」类，对应0.375rem，适合按钮、卡片等常规圆角，不够大时无法形成胶囊 - 如果徽章文字很长，
rounded-pill仍能保持两端半圆；而rounded-3在宽徽章上只会看到微小弧度
要不要额外加 px-3 py-1 调整内边距？
看实际效果。Bootstrap 徽章默认已有 padding: 0.35em 0.65em，多数场景够用。但如果你发现文字贴边、或和相邻文字间距不协调，可以微调：
立即学习“前端免费学习笔记（深入）”；
- 文字偏少（如 “New”）：加
px-2缩小横向空间更紧凑 - 文字略长（如 “Beta Feature”）：加
px-3 py-1避免文字撑开后圆角变形 - 注意不要加
text-center——徽章是行内元素，居中类对它无效，反而可能触发意外 display 变化
真正要注意的是：胶囊徽章在小屏幕或缩放比例高时，如果父容器宽度受限，rounded-pill 依然生效，但视觉上可能像“被压扁的椭圆”。这时候得检查布局容器是否留足最小宽度，而不是改圆角值。
