Bootstrap 4.5 Navbar折叠项异常：图标可见但菜单不显示

核心排查点及解决步骤 #

1. 检查依赖库引入顺序 #

Bootstrap 4的折叠组件依赖jQuery和Popper.js，必须按以下顺序引入（本地文件或兼容的资源）：

<!-- 先引入jQuery -->
<script src="jquery.min.js"></script>
<!-- 再引入Popper.js -->
<script src="popper.min.js"></script>
<!-- 最后引入Bootstrap 4.5的JS文件 -->
<script src="bootstrap.min.js"></script>

注意：三个文件版本需与Bootstrap 4.5兼容，且文件路径要正确，顺序不能颠倒

2. 补全导航栏完整HTML结构 #

你提供的代码缺少导航栏的起始包裹标签，完整结构必须包含navbar类的容器，示例如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 可选：品牌/logo -->
  <a class="navbar-brand" href="#">你的品牌</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
          <a class="nav-link" href="light.html">Lights</a>
        </li>
      <li class="nav-item">
        <a class="nav-link" href="light.html">Lights</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="Shades.html">Shades</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="Climtes.html">Climates</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="Settings.html">Settings</a>
      </li>
    </ul>
  </div>
</nav>

3. 排查自定义SCSS样式冲突 #

检查你的-navbar.scss文件，避免以下可能导致折叠区域无法显示的错误样式：

• 不要给.collapse.navbar-collapse强制设置display: none !important
• 不要覆盖Bootstrap自带的.show类样式（折叠组件通过添加.show类来显示内容）
• 检查是否有自定义的visibility、height或overflow属性限制了折叠区域的展开

4. 验证data属性与ID匹配 #

确认折叠按钮的data-target="#collapsibleNavbar"与折叠区域的id="collapsibleNavbar"完全一致，大小写、拼写都不能出错。

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