Bootstrap导航栏在iPhone移动端无法点击问题求助

核心问题：Bootstrap CSS与JS版本不兼容 #

你当前页面引入了Bootstrap 5.1.3的CSS，但加载的JS却是Bootstrap 4.6.2的bundle，两者API不匹配导致交互失效：

• Bootstrap 5使用data-bs-toggle、data-bs-target这类带bs前缀的属性触发折叠
• Bootstrap 4对应的属性是data-toggle、data-target（无前缀）

这种版本混用在iOS Safari中表现更明显，直接造成汉堡菜单点击无响应。

修复步骤 #

1. 统一Bootstrap版本（推荐保留Bootstrap 5） #

替换页面底部的JS引用，移除jQuery（Bootstrap 5不再依赖jQuery）：

原代码：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

修改为：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

2. 额外排查点（若修复后仍有问题） #

• 检查自定义JS脚本是否覆盖了导航栏的点击事件
• 临时给导航栏添加style="z-index: 9999;"，确认是否被其他元素遮挡
• 清除iOS Safari缓存，确保加载最新的JS文件

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