Bootstrap 5 的 navbar-toggler 必须手动编写按钮元素，不能依赖 class 自动生成；需显式写出 <button class="navbar-toggler"> 并确保其位于 <nav> 内、<div class="navbar-collapse"> 之前，正确配置 data-bs-toggle、data-bs-target、aria-controls、aria-expanded 和 aria-label 属性，且 target ID 必须与 collapse 容器 id 严格一致。
折叠按钮必须手动写，不能靠 class 自动生成
Bootstrap 5 的 navbar-toggler 不是“写了 navbar-expand-lg 就自动冒出来”的元素——它必须显式写出 <button class="navbar-toggler"></button>，否则在任何屏幕尺寸下都不会出现。很多人以为加了 navbar-expand-* 就够了，结果小屏没按钮、点不了菜单，根源就在这儿。
常见错误现象：navbar-toggler 消失、控制台无报错、检查 DOM 发现按钮根本没渲染。
- 确认你没依赖旧版 Bootstrap 4 的“自动注入”逻辑（v4 某些构建版本曾尝试动态插入，但 v5 彻底移除）
- 确保按钮放在
<nav class="navbar">内部，且在<div class="navbar-collapse">之前 - v5 必须用
data-bs-toggle="collapse"和data-bs-target="#xxx"，写成data-toggle会完全失效
自定义结构时，图标和文本必须同级包裹，别用伪元素
想加文字如 “菜单” 或图标+文字组合（比如 SVG + “更多”），不能靠 ::before 插入图标——Bootstrap 3/5 都不保证伪元素与文本基线对齐，尤其 SVG 的 viewBox 或字体行高稍有差异，就会图文错位、上浮或下沉。
正确做法是把图标和文本都写进 button 内部，用内联元素自然流对齐：
立即学习“前端免费学习笔记（深入）”；
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <svg class="navbar-toggler-icon" aria-hidden="true"></svg> <span class="ms-1">菜单</span> </button>
- SVG 必须带
class="navbar-toggler-icon"才能继承默认 base64 图标样式（否则空白） - 用
ms-1（v5）或ml-1（v4）控制间距，避免 margin-top/bottom 破坏垂直居中 - 如果用了自定义 SVG，记得设
width和height，否则可能被 flex 压缩变形
data-bs-target 和 collapse 容器的 id 必须严格一致
这是点击无反应最常踩的坑：按钮的 data-bs-target 值和 <div class="collapse navbar-collapse"> 的 id 字符串必须逐字匹配，包括大小写、连字符、前后空格。
例如：data-bs-target="#mainNav" 对应的容器必须是 <div id="mainNav" class="collapse navbar-collapse">，写成 mainnav、MainNav 或 #main-nav 都会失败。
- 浏览器控制台不会报错，JS 会静默忽略不匹配的 target
- 可以用
document.querySelector(data-bs-target)在控制台手动验证是否能取到元素 - v4 用户注意：别混用
data-bs-*和data-toggle，两者互斥
自定义后要手动补全可访问性属性
原生 navbar-toggler 自带 aria-controls、aria-expanded，但手动写的按钮默认没有。如果删掉原有按钮重写结构，这些属性得自己加上，否则屏幕阅读器无法识别开关状态。
建议直接复制 Bootstrap JS 自动生成的属性逻辑：
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
-
aria-expanded初始值写false，JS 会在展开时自动切为true -
aria-controls的值必须和data-bs-target指向的 id 一致 -
aria-label别省略，中文场景建议写 “切换导航菜单” 而非英文 “Toggle navigation”
aria- 属性、错一个 id 大小写、或者把按钮塞错位置，都会让整个折叠逻辑静默失效。 
