Bootstrap 4移动端Navbar下拉按钮点击无响应问题求助

核心问题 #

折叠按钮的data-target属性值与目标折叠容器的id不匹配：

• 按钮设置的data-target="#collapsibleNavbar"，但实际需要折叠的容器id为navbarSupportedContent，两者不匹配导致点击事件无法关联到正确的容器。

修复方法 #

将折叠按钮的data-target值修改为与容器id一致即可，修正后的按钮代码：

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

额外排查点 #

1. 确认脚本加载顺序正确：必须按jQuery → Popper.js → Bootstrap JS的顺序加载，当前加载顺序符合要求。
2. 检查是否存在重复加载的jQuery或Bootstrap JS文件，避免版本冲突。

内容的提问来源于stack exchange，提问作者İbrahim Koçal