Bootstrap导航栏切换按钮点击后不显示导航项的问题排查

以下是几个常见的原因及解决方法：

• 缺失Bootstrap JavaScript依赖
  Bootstrap的折叠组件需要依赖Popper.js和Bootstrap JS才能正常工作。确保在页面底部添加以下脚本（顺序不能错）：

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
  

• 导航栏根元素缺少必要类
  你的代码片段中未显示<nav>标签的开头部分，需确保它包含navbar和navbar-expand-*类（比如navbar-expand-lg，用于指定导航栏在多大屏幕尺寸下折叠）：

  <nav class="navbar navbar-expand-lg">
    <!-- 你的container-fluid代码 -->
  </nav>
  

• 自定义CSS覆盖了Bootstrap样式
  检查是否有自定义CSS强制隐藏了.collapse元素，例如：

  .collapse { display: none !important; }
  

  这类规则会阻止折叠内容在点击切换按钮后显示，需要移除或修改。

• 确认数据属性匹配
  你的代码中data-bs-target="#navbarNav"与折叠容器的id="navbarNav"是匹配的，这部分无需修改。

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