Bootstrap 5导航栏小屏无法展开/收起问题咨询

这是Bootstrap导航栏配置里很常见的问题，绝大多数情况和JavaScript依赖未正确加载有关，少数是响应式逻辑冲突导致的。

核心原因排查 #

• 缺少必要的JS依赖：Bootstrap 5的折叠组件依赖Popper.js和自身的JavaScript文件，如果没加载这两个，点击导航栏切换按钮不会触发折叠，窗口大小变化时也无法自动切换导航栏的展开/收起状态。
• JS加载顺序错误：必须先加载Popper.js，再加载Bootstrap的JS文件，否则Bootstrap无法调用Popper的相关方法，折叠功能失效。
• 页面JS冲突：如果页面里引入了jQuery或其他前端库，可能会和Bootstrap的事件绑定机制冲突，导致折叠逻辑不生效。

快速修复方案 #

1. 确保正确加载依赖：在页面的</body>标签前添加以下代码（使用CDN或本地文件均可，保证路径正确）：

<!-- 先加载Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<!-- 再加载Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

2. 检查属性一致性：确认导航栏切换按钮的data-bs-target="#nav"和折叠容器的id="nav"完全匹配，你的代码里这部分是正确的，但可以再核对一遍。
3. 排查JS冲突：暂时移除页面中其他非必要的JS文件，测试导航栏功能是否恢复，逐步定位冲突来源。

内容的提问来源于stack exchange，提问作者Max Smith