Bootstrap徽章Badge用法 Bootstrap如何给列表添加数字角标-Bootstrap教程-PHP中文网

badge需嵌入内并右上角对齐：先为设position: relative，再用99+，translate-middle确保居中不溢出。

直接把 <span class="badge"></span> 塞进 <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></ul> 上直接加 list-style: none 就完事，得同步处理 padding-left，不然 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

<ul class="list-group"></ul> 本身有内建 padding/margin 和 border，直接往 <li class="list-group-item"> 里塞 badge，容易出现上下间距不对齐、圆角被 badge 截断等问题。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

优先用 <div class="list-group"> + <code><button class="list-group-item"></button>，语义更稳，且 button 默认不带 list-style，对 badge 更友好
如果坚持用 <ul></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 控制内边距，否则小数字显得空

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 都会飞到页面左上角。