Bootstrap 5 的 navbar 组件内置响应式折叠逻辑，只需引入 bootstrap.bundle.min.js 并正确使用 data-bs-toggle、data-bs-target、navbar-expand-* 和 collapse 类即可实现桌面展开、移动端汉堡菜单功能。
直接用 Bootstrap 5 的 navbar 组件最省事
Bootstrap 5 的 navbar 已内置响应式折叠逻辑、移动端汉堡菜单、断点适配和可访问性支持，不用自己写 @media 或 JS 控制显隐。前提是项目已引入 Bootstrap CSS 和 JS（含 bootstrap.bundle.min.js，它包含 Popper 和 collapse 插件）。
关键点：
- 必须加
data-bs-toggle="collapse"和data-bs-target指向折叠容器 -
navbar-expand-*类决定在哪一断点展开（如navbar-expand-md表示 ≥768px 展开） - 移动端折叠内容必须包在 内
- 不要漏掉
，否则汉堡按钮不触发复制粘贴就能跑的最小可用代码
这段代码在桌面端显示完整导航，在手机上点击汉堡图标才展开菜单。注意：
id="navbarNav"必须和data-bs-target的值严格一致，大小写、符号都不能错。常见翻车现场和修复方式
实际用的时候容易卡在这几个地方：
立即学习“前端免费学习笔记（深入）”；
- 汉堡按钮点了没反应 → 检查是否加载了
bootstrap.bundle.min.js（不是bootstrap.min.js），且控制台无ReferenceError: bootstrap is not defined - 菜单在小屏下仍展开 → 确认用了
navbar-expand-*（比如navbar-expand-lg），而不是只写了navbar-expand（这是 Bootstrap 4 写法，5 中已废弃） - 折叠后背景变白/文字看不清 → 默认
navbar-collapse是透明背景，加bg-light或自定义类覆盖background-color - 移动端菜单项间距太小 → 在
.navbar-nav .nav-link上加padding，或用py-2这类间距工具类
想微调样式但不想破坏响应逻辑？这样改
Bootstrap 的响应式行为由 JS 和 CSS 类共同驱动，直接覆盖关键类（如删掉
collapse）会失效。安全做法是：- 用自定义 class 包裹整个
nav，然后写后代选择器，例如：.my-navbar .nav-link { font-weight: 600; } - 修改断点：重定义
$grid-breakpoints后重新编译 Sass，或直接用navbar-expand-xl+ 自定义媒体查询补丁 - 替换汉堡图标：保留
navbar-toggler-icon占位，用background-image覆盖 SVG，别删这个 class - 禁用折叠（纯桌面导航）：删掉
navbar-toggler和collapse相关结构，只留navbar-expand-xxl和navbar-nav
真正麻烦的从来不是“怎么让导航响应式”，而是“改了一处，另一处崩了还找不到原因”。Bootstrap 的
navbar把 JS 行为和 CSS 类名耦合得挺紧，动结构前先看一眼官方文档里navbar的 DOM 结构要求。 - 不要漏掉
