Bootstrap 3.3.6导航栏折叠按钮失效排查求助

API 探路者

2026-5-15

解决Bootstrap 3.3.6固定顶部导航栏折叠按钮无法点击的问题

我帮你排查了代码里的几个关键问题，全是Bootstrap版本语法混用导致的——你用了Bootstrap 4的写法来写Bootstrap 3的导航栏，这就难怪折叠按钮点不动了！下面给你拆解问题和修复方案：

问题1：折叠按钮用错了类

Bootstrap 3里的折叠触发按钮类是navbar-toggle，你写的navbar-toggler navbar-toggler-right是Bootstrap 4才有的类，3.x版本根本不识别，按钮的功能触发和样式都会失效。

问题2：`data-target`属性缺少`#`前缀

data-target需要精准指向折叠区域的ID，正确格式是data-target="#ex1"，你写的data-target="ex1"少了#，导致Bootstrap的JS找不到对应的折叠容器，自然没法触发展开/收起。

问题3：多余的Bootstrap 4属性和类

你加的aria-controls、aria-expanded、nav-item、nav-link这些都是Bootstrap 4及以后的属性/类，Bootstrap 3完全不支持，反而可能干扰原有功能逻辑。

修复后的完整代码

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#ex1" aria-label="Toggle navigation">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">לוגו</a>
    </div>
    <div class="collapse navbar-collapse" id="ex1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">דף הבית</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>