Navbar折叠按钮失效求助：页面缩小时菜单按钮无法触发

问题核心是Bootstrap版本属性不匹配：你引入的是Bootstrap 4的JS文件，但按钮上用的是Bootstrap 5的属性命名规则，导致JS无法识别触发逻辑。

• Bootstrap 4中，折叠组件的触发属性为data-toggle和data-target，不带-bs-前缀
• 你代码里写的data-bs-toggle和data-bs-target是Bootstrap 5的语法，和当前引入的Bootstrap 4 JS完全不兼容

修复后的按钮代码 #

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navLinks">
  <span class="navbar-toggler-icon"></span>
</button>

完整修复后的Navbar代码 #

<nav id="mainNavbar" class="navbar navbar-dark bg-dark navbar-expand-md"> 
  <a href="#" class="navbar-brand">CANDY</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navLinks">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div id="navLinks" class="collapse navbar-collapse">
    <ul class="navbar-nav">
     <li class="nav-item">
      <a href="#" class="nav-link">Home</a>
     </li>
     <li class="nav-item">
      <a href="#" class="nav-link">About</a>
     </li>
     <li class="nav-item">
      <a href="#" class="nav-link">Tickets</a>
     </li>
    </ul>
  </div>
</nav>

如果后续想升级到Bootstrap 5，需要同步替换CSS和JS文件，但针对当前场景，修改属性前缀是最直接的修复方式。

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