Bootstrap 5中data-bs-target不生效 点击汉堡菜单未显示导航链接

• 当前代码仅引入了Bootstrap 5.0.0-beta1的样式表资源，缺失了支撑组件交互逻辑的对应JavaScript文件。

具体逻辑说明 #

• 你代码中配置的data-bs-toggle="collapse"、data-bs-target="#navbarTogglerDemo01"都属于Bootstrap 5预定义的组件识别标记，这类标记不会被浏览器原生的HTML逻辑自动解析，必须由Bootstrap自带的脚本完成事件绑定，才能实现点击汉堡按钮触发导航折叠/展开的效果。
• 没有脚本运行时，data-bs-target只是一个普通的自定义属性，浏览器不会对它做任何处理，也就表现为“设置的target值未生效”的现象。
• 不少开发者参照官方文档抄组件代码时，只会复制页面上显示的组件结构代码，忽略了文档示例中默认加载的脚本依赖，就会出现静态样式渲染正常（比如导航栏的深色背景、汉堡按钮的外观都显示正确），但点击交互完全无响应的现象。
• 你写的导航栏属性配置本身没有错误：带bs-前缀的data-bs-*属性是Bootstrap 5的标准写法，不存在写错属性名、匹配错ID的问题。

解决方向 #

在页面结构的末尾（</body>标签闭合之前），引入和当前使用的CSS版本完全匹配的Bootstrap 5 官方交互脚本包，完成脚本加载后，汉堡菜单的触发逻辑就会自动识别你写的data-bs-*属性，实现预期的导航展开效果。

注意：不要错误引入Bootstrap 4版本的脚本，也不要只引入jQuery——Bootstrap 5的交互组件已经完全脱离jQuery依赖，版本不匹配的脚本同样无法驱动当前的导航折叠组件。

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