Bootstrap 4 导航栏Toggle切换功能异常，点击无法展示导航链接

问题原因排查 #

• 折叠目标指向错误：你的navbar-toggler按钮的data-target="#nav-bg-blue-custom2"属性指向了整个导航栏
• 折叠容器无对应ID：当前生效的导航内容容器<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">没有设置ID，你注释掉的id="navbarCollapse"并未应用到实际使用的容器上，导致按钮找不到控制对象。
• 无障碍属性不匹配：按钮上的aria-controls="navbarCollapse"属性需要和折叠容器的ID完全对应，当前属性和实际容器无关联。
• HTML标签未闭合：代码片段中的ul、li、a标签均未正确闭合，会导致浏览器解析DOM结构异常，干扰折叠功能的触发。

修复方案 #

1. 给带有navbar-collapse类的div添加IDnavbarCollapse
2. 将toggler按钮的data-target属性修改为#navbarCollapse
3. 补全所有未闭合的HTML标签
4. 确认已经正确引入Bootstrap 4依赖的jQuery、Popper.js和Bootstrap本身的JS文件（引入顺序不能乱：jQuery → Popper.js → Bootstrap JS）

修复后代码参考： #

<nav class="navbar navbar-expand-md navbar-dark navbar-toggleable-md" id="nav-bg-blue-custom2">
  <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2" id="navbarCollapse">
    <ul class="navbar-nav mt-0" id="nav-div-custom">
      <li class="nav-item active li-custom">
        <a class="navbar-brand" href="#">
          <img src="assets/img/gear-focus-logo-photo-and-video-marketplace.png" />
        </a>
      </li>
      <!-- 其余导航项补全在这里 -->
    </ul>
  </div>
  <div class="mx-auto order-0 input-group rounded">
    <input type="search" class="form-control nav-search-custom" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
    <span class="border-0 search-addon-custom" id="search-addon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" class="bi bi-search white-icon-custom" viewBox="0 0 16 16">
        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
      </svg>
    </span>
  </div>
</nav>

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