徽章必须嵌套在标签内部且紧贴文字右侧，避免浮动干扰，子菜单需单独添加，动态更新须精准定位DOM，颜色尺寸需自定义适配，移动端需确保单行显示与溢出可见。
直接用 layui-badge 插入菜单项内部即可
layui 的导航菜单（layui-nav）本身不内置徽章支持，但它的 dom 结构是开放的，允许你在 layui-nav-item 或 layui-nav-child 里的任意位置手动插入徽章元素。关键不是“怎么加”，而是“加在哪、怎么对齐、会不会影响点击区域”。
常见错误是把 layui-badge 放在 a 标签外侧，导致点击时徽章不响应、样式错位或折叠菜单时徽章被裁剪。
- 正确位置：徽章必须嵌套在
@#@#@#@#@#@#@#@#@#@0） - 避免浮动干扰：不要给
layui-badge加float:right，Layui 默认用display:inline-block+vertical-align:middle对齐，浮动会破坏导航项高度计算 - 子菜单徽章要加在子项里：如果要在下拉菜单中显示徽章，需在
layui-nav-child的每个layui-nav-item内部单独加，不能只在外层菜单项上加
动态更新徽章数字时注意 DOM 选择器范围
很多人用 document.getElementById 或全局 $('.layui-badge') 更新数字，结果改错了位置——比如多个“消息”菜单都带徽章，但只希望更新未读消息数，却把所有徽章都刷成了同一个值。
解决办法是给对应菜单项加唯一标识，再精准定位：
- 给目标
a标签加id="nav-msg"或data-type="message" - 更新时用
document.querySelector('#nav-msg .layui-badge').innerText = '5' - 若用 jQuery，务必限定作用域：
$('#nav-msg').find('.layui-badge').text(5)，而不是$('.layui-badge').text(5) - 注意：Layui 初始化后，
layui-nav可能会重写部分 DOM（尤其开启skin或bar时），建议在layui.use(['element'], callback)回调内操作 DOM
徽章颜色和大小要配合导航主题
Layui 的 layui-badge 默认只有 layui-badge-dot（红点）和基础圆角数字两种形态，没有内置 success/warning/danger 等语义色。想区分类型，得自己加 CSS 类或内联样式。
- 颜色控制：直接加
style="background-color:#FF5722;"，或定义自定义类如layui-badge-warning并在 CSS 中设置background-color和color - 尺寸适配：默认徽章高度略大于导航文字行高，若导航用了
layui-nav-lg，需同步加大徽章字体和 padding，例如：<span class="layui-badge" style="font-size:12px;padding:1px 6px;">99+</span> - 超出显示为 “99+”：业务逻辑需自行判断，Layui 不自动截断，
if (num > 99) badgeText = '99+'
移动端折叠菜单里徽章容易被隐藏
当导航启用响应式折叠（layui-nav-sm 或屏幕宽度小于 768px），layui-nav 会切换为侧边栏模式，此时若徽章没设 white-space:nowrap，长数字可能换行或被容器 overflow 隐藏。
- 强制单行：给徽章加
style="white-space:nowrap;" - 检查父容器：折叠状态下的
layui-nav-item宽度变窄，确保其overflow不是hidden（Layui 默认是visible，但自定义样式可能覆盖） - 图标+徽章组合更稳妥：比如用
<i class="layui-icon"></i><span class="layui-badge">2</span>，图标占位稳定，比纯文字更抗挤压
真正麻烦的不是加徽章，而是它在不同菜单层级、不同皮肤、不同屏幕宽度下的表现一致性——每次改样式前，最好在 PC、平板、手机三个视口下点开折叠菜单亲自点一遍看看。
