必须给.nav-link加position-relative，再配position-absolute top-0 start-100 translate-middle实现右悬垂居中；垂直对齐用d-inline-flex align-items-center，禁用vertical-align；数字≥100时加white-space: nowrap。
导航栏里Badge飘到屏幕右上角？先加position-relative
根本不是.badge写错了，而是它没锚点。只要.nav-link没设position-relative，加了top-0 end-0也会向上找最近的定位祖先——常直接跳到或<nav></nav>，结果徽章卡在浏览器右上角。
必须给.nav-link本身加position-relative，不能靠祖先“代管”：
<a class="nav-link position-relative">消息<span class="badge bg-danger">3</span></a>- 若用
<button class="nav-link"></button>，同样要加position-relative，按钮默认不提供定位上下文 - 检查父级是否意外带
overflow: hidden，有就删掉或改成overflow: visible
想让Badge居中悬浮在文字右侧？用start-100 translate-middle
只加top-0 end-0会让徽章左上角顶到.nav-link右上角内侧，数字变宽（如"99+"）就容易向右溢出、遮住文字末尾；加translate-middle才能让徽章自身中心点对齐那个角落。
推荐组合：position-absolute top-0 start-100 translate-middle，等价于top: 0; left: 100%; transform: translate(-50%, -50%)：
- 不用
right像素值，避免字号变化时偏移失准 -
start-100比end-0更可靠，适配RTL（从右向左）布局 - 数字≥100时务必加
white-space: nowrap在.badge上，否则换行会撑开父容器，导致translate-middle计算失效
Badge和文字挤在一起、垂直不对齐？别碰vertical-align
.badge是inline元素，默认vertical-align: baseline，而.nav-link通常有line-height: 1.5，基线天然错位。硬调vertical-align: middle在不同DPR屏（如iPhone Retina）下表现浮动，不可靠。
真正确定性解法是统一用弹性布局：
- 给
.nav-link加d-inline-flex align-items-center gap-1（Bootstrap 5.3+） - 或覆盖CSS：
.nav-link .badge { display: inline-flex; align-items: center; justify-content: center; } - 避免单独给
.badge设margin-top或transform: translateY()——换字体就得重算
移动端徽章被裁切或错位？重点查三处
汉堡菜单展开后，徽章常文字重叠、垂直偏移、甚至被截断——这不是.badge类的问题，而是flex与行内行为冲突导致的。
- 确保
.nav-link是flex容器：d-flex align-items-center，防止因line-height不一致“浮起来” - 强制徽章不换行：
white-space: nowrap（尤其数字超过两位时） - 检查
.nav-link是否设了padding-right不足，至少留出1.5rem空间，避免徽章撞到右边框
最易忽略的是：translate-middle依赖徽章自身尺寸计算偏移，一旦white-space: normal或父容器font-size突变，它就失效——所以nowrap和尺寸控制必须同步做。
