Bootstrap导航栏响应式折叠不能靠flex-wrap实现，因其仅控制布局换行，无法触发汉堡菜单、显隐控制或JS交互；真正依赖navbar-expand-*类、data-bs-toggle="collapse"属性和.collapse容器ID匹配三要素。
Bootstrap 导航栏的响应式折叠不能靠 flex-wrap 实现——它只是让子元素换行，不控制显隐、不触发汉堡菜单、不处理移动端交互，硬加 flex-wrap: wrap 只会让小屏下导航项堆成多行，反而破坏可访问性和触控体验。
为什么 flex-wrap 对 navbar 折叠完全无效
Bootstrap 的响应式折叠本质是「条件性显隐 + JS 事件绑定」，不是纯 CSS 布局调整。flex-wrap 属于 Flexbox 布局行为，只影响已渲染元素的排列方式，它：
- 无法让导航项在小屏自动收进汉堡菜单
- 不会为按钮添加
aria-expanded或切换show类 - 不触发
bootstrap.Collapse插件的过渡动画和键盘支持（如 Enter/Space 键展开） - 如果强行用
flex-wrap挤出多行，navbar-nav宽度可能溢出容器，导致横向滚动或遮挡内容
navbar-expand-* 才是真正的断点控制开关
Bootstrap 用 navbar-expand-* 类（如 navbar-expand-md）在指定断点启用「弹性布局 + 折叠逻辑」，底层依赖的是 @media 查询 + display: flex 切换 + .collapse 的 height 过渡。关键行为包括：
- ≤ 断点宽度时：
.navbar-collapse默认display: none，且.navbar-toggler按钮可见 - ≥ 断点宽度时：
.navbar-collapse变为display: flex，同时.navbar-togglerdisplay: none - 这个切换由 CSS 控制，但显隐动作必须由 JS（
bootstrap.Collapse）驱动，否则点击无反应
示例结构中，navbar-expand-md 和 data-bs-target="#navbarContent" 必须配对使用，漏掉任一环都会导致小屏菜单不收起或点击无效。
立即学习“前端免费学习笔记（深入）”；
常见错误：以为加了 flex-wrap 就能替代 collapse
实际项目里容易踩的坑集中在结构与属性错配：
- 写了
navbar-expand-lg却没加data-bs-toggle="collapse"—— 汉堡按钮点击后毫无反应 - 给
.navbar-nav直接加flex-wrap: wrap，但没包在<div class="collapse navbar-collapse"> 里 —— 小屏下导航项挤成两行，却仍占据全部高度，遮住下方内容 <li>动态插入导航 HTML 后，忘了手动初始化 Collapse：<code>new bootstrap.Collapse(document.getElementById('navbarContent'))—— 新增的按钮无法控制折叠 - 自定义 CSS 覆盖了
.navbar-collapse.collapse的height: 0和overflow: hidden—— 折叠动画失效，内容直接闪现
真需要「视觉换行」时，只在非折叠态微调
极少数场景（比如超长品牌名+大量导航项）想在大屏也换行，可在 navbar-expand-* 生效后的状态里加限制：
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav {
flex-wrap: wrap;
}
.navbar-expand-lg .navbar-nav .nav-item {
flex: 1 1 auto;
}
}
但注意：这仅用于优化宽屏布局，绝不能代替 collapse 机制；且必须确保 .navbar-collapse 仍在 display: flex 状态下工作，否则会和 Bootstrap 内置逻辑冲突。
真正要解决响应式折叠，盯紧三样东西：navbar-expand-* 类、data-bs-toggle="collapse" 属性、.collapse 容器的 id 匹配。其它任何 CSS 技巧都是旁支，加得不对反而掩盖问题根源。
