Bootstrap导航栏点击无法展开，文件引入正确仍失效如何解决

你当前引入的Bootstrap 5 依赖资源配置正确，bootstrap.bundle.min.js已内置必需的Popper.js，无需额外补充依赖。问题基本出在导航栏DOM结构或自定义代码冲突上，按以下顺序排查即可：

• 核对导航栏属性配置：Bootstrap 5 交互属性前缀为data-bs-*，而非旧版的data-*，需满足三个核心对应关系：
  1. 外层导航容器必须加navbar navbar-expand-*类，后缀的断点（sm/md/lg等）对应折叠触发的窗口尺寸
  2. 折叠按钮必须配置data-bs-toggle="collapse"、data-bs-target="#自定义菜单ID"两个属性
  3. 可折叠的菜单容器必须加collapse navbar-collapse类，且ID与按钮data-bs-target的取值完全一致，大小写敏感
• 排查自定义样式冲突：临时注释掉本地css/style.css的引用，测试导航栏是否能正常展开。如果恢复正常，说明自定义样式中对.navbar、.collapse类设置了display: none !important、height: 0 !important等强制规则，覆盖了Bootstrap原生样式
• 排查自定义脚本冲突：临时注释掉本地js/script.js的引用，排除自定义JS绑定点击事件时阻止默认行为、操作DOM结构导致的交互失效

正确的Bootstrap 5 导航栏结构参考：

<nav class="navbar navbar-expand-md bg-light navbar-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">站点名称</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-expanded="false" aria-label="切换导航">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav me-auto mb-2 mb-md-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">栏目1</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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