导航菜单在移动端不折叠，需检查是否遗漏navbar-toggler按钮和data-bs-toggle="collapse"属性，确保其data-bs-target与collapse容器id匹配，并正确使用navbar-expand-*类指定断点。
导航菜单在移动端不折叠？检查是否漏了 navbar-toggler 和 data-bs-toggle="collapse"
Bootstrap 5 的响应式导航栏默认不会自动适配——它依赖显式声明的折叠触发器和目标容器。如果菜单在小屏下仍水平铺开、溢出或错位，大概率是没加折叠控制结构。
- 必须用
<button></button>带class="navbar-toggler"和data-bs-toggle="collapse"属性，指向id对应的<div class="collapse navbar-collapse"> <li> <code>navbar-toggler默认只在md及以下显示（display: noneonmd+），所以小屏才出现三杠按钮 - 漏掉
data-bs-target="#navbarNav"或目标id不匹配，会导致点击无反应
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">首页</a></li>
<li class="nav-item"><a class="nav-link" href="#">关于</a></li>
</ul>
</div>
</nav>
navbar-expand- 类决定在哪一断点展开，别硬写 navbar-expand-md 就以为万事大吉
这个类名里的断点（如 sm / md / lg）定义的是「最小屏幕宽度下开始水平展开」，不是「只在该尺寸生效」。比如 navbar-expand-md 表示：≥768px 水平展开；＜768px 折叠为汉堡菜单。
- 如果你希望在平板（
sm，576px）就展开，改用navbar-expand-sm - 若想始终展开（PC + 移动都横排），用
navbar-expand（无后缀），但会失去移动端折叠能力 - 误用
navbar-expand-lg却在 iPhone SE（375px）测试，结果当然看不到折叠效果——因为根本没触发折叠逻辑
自定义折叠动画卡顿或闪退？优先关掉 transition 查问题
Bootstrap 5 默认给 .navbar-collapse 加了 transition: all .15s ease-in-out，但某些场景（如嵌套 flex、含图片或字体加载延迟）会导致 collapse 动画撕裂或闪白。
- 临时排查可加
style="transition: none !important;"到navbar-collapse元素上，看是否恢复正常 - 真要保留动画，建议用
max-height+overflow: hidden替代原生height过渡（Bootstrap 内部用的是height+visibility组合） - 不要在
navbar-collapse上直接设display: flex—— 它本身已是display: flex，重复设置可能干扰 collapse 的渲染状态
第三方图标或文字超出导致移动端菜单撑宽？用 text-truncate 和 flex-shrink-0 控制
导航项里塞了长文字、SVG 图标或未设宽高的图片时，折叠后的菜单在小屏下可能横向滚动或挤压按钮，本质是子元素未约束伸缩行为。
立即学习“前端免费学习笔记（深入）”；
- 对导航链接文字加
class="text-truncate"（需父容器有width或max-width） - 对图标类（如
<i class="bi bi-house"></i>）加flex-shrink-0防止被压缩变形 - 避免在
nav-item内用width: 100%或min-width，它们会破坏 collapse 的内部 flex 布局流
响应式不是加个类就完事，关键是理解 collapse 的触发条件、断点含义和 DOM 结构约束。很多「不生效」其实卡在 toggle 按钮没绑定、target ID 不一致，或者自定义样式覆盖了 navbar-collapse 的 display 切换逻辑。
