Angular中Bootstrap汉堡菜单点击无响应问题求助

你的汉堡菜单点击没反应，核心原因是Bootstrap的折叠交互功能需要依赖其JavaScript插件，而你只导入了CSS样式文件，缺少必要的JS支持。

下面是两种可行的解决方法：

方法一：通过npm引入Bootstrap JS #

1. 确保已安装Bootstrap（若未安装，执行命令：npm install bootstrap）
2. 打开项目根目录下的angular.json文件，找到architect > build > options > scripts数组，添加Bootstrap的bundle版JS（已包含Popper.js，无需单独安装）：

"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

3. 重启Angular开发服务器（执行ng serve）

方法二：通过CDN引入Bootstrap JS #

打开项目的src/index.html文件，在<body>标签末尾添加以下CDN链接：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

同样重启开发服务器即可生效。

额外检查点 #

• 你的代码中使用了data-bs-toggle这类Bootstrap 5的属性，确认你安装的Bootstrap版本是5.x，版本不匹配也可能导致问题
• 检查data-bs-target="#navbarText"与折叠容器的id="navbarText"是否完全匹配，你的现有代码这部分是正确的

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