Bootstrap 5导航栏data-toggle折叠功能失效是什么原因？

你使用的 Bootstrap 5 已对交互组件的自定义属性命名做了不兼容更新，代码中沿用的是 Bootstrap 3/4 时代的旧属性名，这类旧属性不会被 Bootstrap 5 的内置组件逻辑识别，自然无法触发折叠交互。

必须修改的属性点 #

• 触发按钮上的 data-toggle="collapse" 需替换为 data-bs-toggle="collapse"
• 触发按钮上的 data-target="#navbarSupportedContent" 需替换为 data-bs-target="#navbarSupportedContent"

从 Bootstrap 5 开始，所有内置交互组件的自定义 data 属性都会增加 bs- 前缀，避免和第三方脚本的自定义属性冲突，不带前缀的旧属性在 Bootstrap 5 正式版中已被完全移除。

附加样式修正 #

代码中的 mr-auto 是 Bootstrap 4 版本的水平外边距类，在 Bootstrap 5 的间距体系中需替换为 me-auto，否则导航列表的自动外边距样式无法正常生效。

修正后的触发按钮参考代码 #

<button class="navbar-toggler ms-1" type="button" 
        data-bs-toggle="collapse" 
        data-bs-target="#navbarSupportedContent" 
        aria-controls="navbarSupportedContent" 
        aria-expanded="false" 
        aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

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