Bootstrap navbar移动端及窗口缩小场景下无法折叠问题求助

问题排查与修复方案 #

1. 优先检查Bootstrap依赖配置 #

导航栏折叠功能依赖JS实现，仅引入Bootstrap CSS无法触发折叠效果，需根据你使用的Bootstrap版本补充对应依赖：

• 若使用Bootstrap 4：需按顺序引入jQuery、Popper.js、Bootstrap 4 JS文件，你当前代码里的data-toggle/data-target属性是Bootstrap 4的标准语法，和版本匹配无需修改
• 若使用Bootstrap 5：Bootstrap 5已将数据属性前缀统一修改为data-bs-，你需要将折叠按钮上的data-toggle="collapse"改为data-bs-toggle="collapse"，data-target="#navbarNavAltMarkup"改为data-bs-target="#navbarNavAltMarkup"，同时引入自带Popper的Bootstrap 5 JS文件即可

2. 修复HTML语法错误 #

你提供的代码中navbar-brand对应的a标签缺少闭合尖括号，会导致DOM渲染异常，修改为：

<a class="navbar-brand" href="#"></a>

3. 可选优化（不影响折叠功能） #

Bootstrap 4+已废弃navbar-right类，若要实现导航项右对齐，给navbar-nav加上ml-auto类即可：

<div class="navbar-nav ml-auto">

修复后完整代码（适配Bootstrap 4） #

<!--NAVIGATION BAR-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav ml-auto">
      <a class="nav-item nav-link active" href="kulykarakoc.github.io">Home <span class="sr-only"></span></a>
      <a class="nav-item nav-link" href="#about">About Me</a>
      <a class="nav-item nav-link" href="#projects">Projects</a>
      <a class="nav-item nav-link" href="#contact">Contact</a>
    </div>
  </div>
</nav>

内容的提问来源于stack exchange，提问作者Kuly Karakoç