如何在Bootstrap里用Badge徽章标出通知数

作者：袖梨 2026-07-19

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"，否则响应式暗色模式下无法自动适配