Bootstrap 4.0导航栏缩放时消失，点击切换按钮无响应求助

问题根源 #

你代码里存在两个关键错误：

• 属性名混淆：Bootstrap 4的折叠组件触发属性是data-toggle和data-target，但你用了Bootstrap 5的data-bs-toggle和data-bs-target，4.x版本无法识别这些属性。
• CDN依赖顺序可能错误：Bootstrap 4的JavaScript功能依赖jQuery和Popper.js，必须按jQuery → Popper.js → Bootstrap JS的顺序引入，否则交互逻辑会失效。

修正步骤 #

1. 修改导航按钮属性
   将按钮中的data-bs-toggle改为data-toggle，data-bs-target改为data-target，修正后的按钮代码：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

2. 确认CDN引入顺序
   确保在页面底部（</body>标签前）按以下顺序引入依赖：

<!-- jQuery 必须放在最前面 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- Bootstrap 4 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>

3. 补全闭合标签
   你提供的代码未闭合</div>和</nav>标签，记得补充完整，确保HTML结构合法。

修正后的完整导航代码 #

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse ml-2 top-bar" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home </a>
        </li>
        <li class="nav-item collections">
          <a class="nav-link collections" href="#">Services</a>
          <ul class="dropdown-menu dropdown-firstmenu">
            <li class="dropdown-submenu">
              <a tabindex="-1" href="#">2014 <span class="dropdown-caret"><i class="fa fa-caret-right"></i></span></a>
            </li>
            <li class="dropdown-submenu">
              <a tabindex="-1" href="#">2014 <span class="dropdown-caret"><i class="fa fa-caret-right"></i></span></a>
            </li>
            <li class="dropdown-submenu">
              <a tabindex="-1" href="#">2014 <span class="dropdown-caret"><i class="fa fa-caret-right"></i></span></a>
            </li>
            <li class="dropdown-submenu">
              <a tabindex="-1" href="#">2014 <span class="dropdown-caret"><i class="fa fa-caret-right"></i></span></a>
            </li>
          </ul>
        </li>
        <li class="nav-item collections">
          <a class="nav-link collections" href="#">Products</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Support</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Downloads</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Blog</a>
        </li>
        <li class="nav-item collections">
          <a class="nav-link collections" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
      <ul class="navbar-nav ">
        <li class="nav-item">
          <a class="nav-link" href="#">My Account</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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