Badge需嵌入<li>内并右上角对齐：先为<li>设position: relative，再用<span class="position-absolute top-0 start-100 translate-middle badge bg-danger">99+</span>，translate-middle确保居中不溢出。
Badge 怎么套在列表项里不换行
直接把 <span class="badge"> 塞进 <li> 里就行，但默认会触发垂直居中偏移和行高撑开，看着像“飘”在文字右边而不是贴着右上角。关键不是加不加，而是怎么对齐。
- 用
<span class="badge bg-primary">3</span>（Bootstrap 5+ 推荐用bg-*而非badge-*） - 给包裹它的
<li>加position: relative（否则绝对定位的 badge 会相对 body 定位） - 如果想右上角固定位置，改用
<span class="position-absolute top-0 start-100 translate-middle badge bg-danger">99+</span>—— 注意translate-middle是必须的，否则 badge 右侧会溢出 - 别在
<ul>上直接加list-style: none就完事，得同步处理padding-left，不然 badge 看起来偏左
Badge 数字动态更新后样式错乱
常见于 Vue/React 渲染列表后，JS 改了 badge 内容但没重置定位或宽度，导致数字变长时遮挡文字、或变短后留白难看。
- 避免用
width: 20px这类固定宽，让 badge 自适应内容；min-width可设为1.5em防止单数字太窄 - 若用绝对定位（
position-absolute），确保父容器<li>有position: relative且未被 transform 干扰（transform 会让 absolute 定位参考系改变） - 数字从
9变成12时，字体可能因 font-weight 或 letter-spacing 微变，建议统一设font-family: system-ui, sans-serif和line-height: 1
Badge 和 Bootstrap 列表组（ListGroup）一起用的坑
<ul class="list-group"> 本身有内建 padding/margin 和 border，直接往 <li class="list-group-item"> 里塞 badge，容易出现上下间距不对齐、圆角被 badge 截断等问题。
- 优先用
<div class="list-group">+<button class="list-group-item">，语义更稳，且 button 默认不带 list-style，对 badge 更友好 - 如果坚持用
<ul>，给<li>加class="d-flex justify-content-between align-items-center"，再把 badge 放在 flex-end 侧，比绝对定位更鲁棒 - 别依赖
badge-pill（Bootstrap 4 的旧类），5.x 已移除，圆角靠rounded-pill，但要配合py-1 px-2控制内边距，否则小数字显得空
需要支持 IE11？Badge 的 position-absolute 在旧浏览器里失效
Bootstrap 5 默认放弃 IE11 支持，但如果你项目还在兼容它，top-0 start-100 translate-middle 这套工具类完全不生效 —— 因为 translate 是 CSS3，IE11 对 transform-origin 解析不稳定。
- 降级方案：用传统写法
style="position: absolute; top: 0; right: 0;"，并确保父<li>有position: relative - IE11 下
start-100会被忽略，所以必须用right: 0，不能指望 RTL 场景自动翻转 - 别用
badge bg-* text-white组合，IE11 对某些bg-类的 background-color 解析异常，显色偏灰，手动补style="background-color: #0d6efd;"
事情说清了就结束。最常被忽略的是父容器的 position: relative —— 没它，所有 absolute 定位的 badge 都会飞到页面左上角。
