navbar-toggler-icon 不显示，90% 是因父容器缺少 .navbar 类导致 CSS 变量 --bs-navbar-toggler-icon-bg 未定义；必须确保 .navbar 是其最近祖先，且正确引入 bootstrap.min.css 和 JS（二者选一），data-bs-toggle 与 data-bs-target 需配对且 ID 精确匹配。
navbar-toggler-icon 不显示？先检查父容器有没有 .navbar
图标不出现，90% 是因为 .navbar-toggler-icon 没能拿到 css 变量 --bs-navbar-toggler-icon-bg。这个变量只在带 .navbar 类的祖先元素上定义，不是写在按钮本身里，也不靠全局作用域生效。
- 错误写法：
<div><button class="navbar-toggler"><span class="navbar-toggler-icon"></span></button></div>—— 父<div>没.navbar，图标背景为空 - 正确写法：
<nav class="navbar"><button class="navbar-toggler"><span class="navbar-toggler-icon"></span></button></nav> - 如果导航栏结构复杂（比如套了
.container或.row），.navbar必须是.navbar-toggler-icon最近的、有该类的**祖先**，不能隔太远
想换图标？别动 JS，直接覆盖 CSS 变量或 background-image
Bootstrap 5.3+ 用 CSS 变量控制图标，不是字体或图片链接，所以改 font-size 或加 class 都没用；也不能靠 Font Awesome 替换 —— .navbar-toggler-icon 是纯 <span>，没内容可替换。
- 最简方式：在
<style>或自定义 CSS 中重设变量：nav.navbar { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230d6efd' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } - 注意 SVG 中的单引号要 URL 编码（如
'→%27），颜色、线条粗细、间距都靠改这个 SVG 控制 - 若想用外部图标（如 SVG 文件），直接覆盖
background-image：.navbar-toggler-icon { background-image: url("/icons/menu.svg"); background-repeat: no-repeat; background-position: 50%; }
data-bs-toggle 和 data-bs-target 写错，图标可能“有但点不动”
图标显示了，点击没反应？不是图标问题，是折叠逻辑没接上。Bootstrap 5 强制用 data-bs-* 前缀，写成 data-toggle 或漏掉 data-bs-target 都会静默失败。
- 必须同时存在：
data-bs-toggle="collapse"+data-bs-target="#id" -
data-bs-target的值必须和目标容器的id完全一致（大小写、连字符、空格都不能差） - 确保目标容器有
.collapse类，且没有被 JS 误删或 CSS 强制display: block - 浏览器控制台报
Uncaught TypeError: Cannot read property 'addEventListener' of null？说明 JS 找不到对应id的元素，先查 DOM 是否渲染完成、ID 是否拼错
引入顺序和依赖缺失，会让整个折叠功能“失联”
图标不显示 + 点击无响应，很可能是 JS 没加载成功，或者加载了但互相冲突。
- 必须引入
bootstrap.min.js（或bootstrap.bundle.min.js），但二者**只能选其一**；bundle版已含 Popper，再单独引 Popper 会报Popper is not defined或重复初始化错误 - 推荐脚本顺序（放在
</body>前）：<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2/dist/umd/popper.min.js"></script><br><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
（用bundle就删第一行） - 漏掉
bootstrap.min.css？图标不会显示（无变量定义）、折叠区域不会隐藏（无.collapse的height: 0和overflow: hidden）、断点也不生效
.navbar 类 —— 它不参与布局，不改变视觉，但没了它，图标就彻底消失。很多人反复检查 SVG、JS、路径，最后发现只是少了一个 class。 
