badge圆点化的关键是将border-radius设为50%并强制width=height，同时清除padding、设font-size: 0、加display: inline-block（bootstrap 5.2+必需），否则仅改圆角会因默认内边距和行内特性导致椭圆变形。
Badge圆点化关键：用border-radius覆盖默认样式
Bootstrap的.badge默认是带圆角的矩形，想变成纯圆点，核心不是换组件，而是重置border-radius并控制宽高比。默认border-radius: 0.375rem在小尺寸下仍显方正，必须强制设为50%，同时保证width和height相等——否则哪怕border-radius: 50%也会拉成椭圆。
- 直接加内联样式：
<span class="badge bg-primary" style="width: 12px; height: 12px; border-radius: 50%; padding: 0;"></span> - 更推荐写自定义类（避免内联）：
.badge-dot { width: 10px; height: 10px; border-radius: 50%; padding: 0; font-size: 0; } - 注意
font-size: 0——否则文字撑开高度，破坏圆形；若需显示数字，改用line-height: 10px并居中
为什么不能只改border-radius？
只加border-radius: 50%却没设等宽高等于白做。Bootstrap的.badge默认有padding: 0.375em 0.75em，左右内边距远大于上下，导致宽度天然大于高度。不重置padding和width/height，border-radius: 50%只会产出一个横向拉伸的椭圆。
- 删掉
padding（或设为0），否则圆点边缘会虚化或变形 - 避免用
min-width——它会干扰等宽高约束 - 如果用
em单位，务必确认父元素font-size稳定，否则圆点大小飘忽
兼容Bootstrap 5.x与旧版的写法差异
Bootstrap 5.2+ 的.badge已移除display: inline-block，默认是inline，这会导致width/height失效。必须显式加display: inline-block或display: block才能生效。
- Bootstrap 5.2+ 必须加：
display: inline-block - Bootstrap 4.x 可省略
display，但加上更稳妥 - 完整可用类：
.badge-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; padding: 0; font-size: 0; }
实际使用时容易漏掉的细节
圆点Badge常用于状态标记（如在线/离线），但很多人忽略垂直对齐和颜色继承问题。默认vertical-align: baseline会让圆点贴着文字底部，看起来像挂件而不是内嵌指示器。
- 加
vertical-align: middle让圆点与文字中线对齐 - 背景色别用
bg-*<code>类叠加——它会覆盖你自定义的<code>width/height，直接用background-color - 若需响应式圆点（比如移动端缩小），不要用
vw单位，改用clamp(6px, 2vmin, 10px)更可控
