Badge徽章必须嵌套在position-relative父容器中才能正确定位，否则会“飘”在页面任意位置；Bootstrap默认badge为inline元素，需依赖父容器相对定位配合top/right等偏移及translate-middle实现精准角标对齐。
Badge徽章的HTML结构必须套在容器内才能正确定位
直接写 <span class="badge bg-danger">5</span> 很容易“飘”在页面任意位置，尤其和按钮、导航项配合时错位。Bootstrap 的 badge 默认是 inline 元素，不自带定位逻辑，必须依赖父容器的相对定位（position: relative）才能用 top/right 等偏移微调。
常见做法是把 badge 包在带 position-relative 类的父元素里：
<div class="position-relative d-inline-block"> <button class="btn btn-outline-secondary">消息</button> <span class="badge bg-danger position-absolute top-0 start-100 translate-middle">3</span> </div>
-
position-relative必须加在父容器上，否则position-absolute的 badge 会相对于 body 或最近的定位祖先定位 -
translate-middle是关键：它让 badge 的中心点对齐到父容器右上角，避免手动算right: -8px这类魔数 - 如果父容器是
<a>或<button>，注意它们默认不是position-relative，得显式加类或内联样式
动态更新通知数时不要直接 innerHTML 覆盖整个 badge 元素
用 document.querySelector('.badge').innerHTML = '7' 看似简单，但一旦 badge 含有其他修饰（比如带图标、自定义颜色类），这种粗暴覆盖会清掉所有 class 和子节点。
更稳妥的做法是只更新文本内容，并保留原有结构：
const badge = document.querySelector('.badge');
if (badge) {
badge.textContent = String(unreadCount);
// 根据数量控制显示/隐藏
badge.classList.toggle('d-none', unreadCount === 0);
}
- 始终用
textContent而非innerHTML，防止 XSS 且语义更准确 - 用
classList.toggle('d-none', condition)控制 badge 显隐，比删 DOM 或设style.display更符合 Bootstrap 的响应式习惯 - 如果通知数为 0 仍要显示 badge（如 “0 new”），就别用
d-none，改用条件判断是否设置textContent
Badge 颜色类在 Bootstrap 5.3+ 中已弃用 badge-danger 等旧命名
Bootstrap 5.2 升级后统一改用 bg-{color} + text-light 组合，旧写法如 badge-danger 在新版中不生效，页面可能显示为无背景的纯文字。
- 正确写法：
class="badge bg-danger text-light"（红色底白字）、class="badge bg-warning text-dark"（黄底黑字，因黄色对比度低需深色文字） - 不推荐硬编码颜色值，优先使用 Bootstrap 内置的
bg-primary/bg-success/bg-info等 - 若需自定义颜色，应通过 Sass 变量重定义
$theme-colors，而非直接写style="background: #ff6b6b"，否则响应式暗色模式下无法自动适配
和 NavItem 或 Dropdown 联用时注意 z-index 层叠顺序
在 navbar 右侧放消息图标 badge，常遇到 badge 被下拉菜单（dropdown-menu）遮挡——因为 dropdown-menu 默认 z-index: 1000，而 badge 没有显式 z-index，按文档流压在下面。
- 给 badge 加
class="position-absolute z-3"（z-3对应z-index: 3）即可，无需写具体数值 - Bootstrap 5.3 提供了
z-0到z-4，z-3通常足够盖过大多数组件，又不会干扰 modal（z-1055）等高优先级元素 - 如果用了自定义 dropdown，检查其
z-index是否被覆盖，此时 badge 的z-3可能不够，需同步调整
position-relative —— 开发时在局部预览正常，一放进复杂布局（比如 flex 容器、table 单元格、第三方组件内部）就错位，这时候先查父级有没有定位上下文，比调 top 值快得多。 
