Bootstrap 5 导航栏(Nav-bar)折叠功能无法触发问题求助

问题根因 #

• Bootstrap 5 对所有交互组件的触发数据属性做了命名空间更新，新增了bs-前缀，你代码中仍在使用 Bootstrap 4 版本的data-toggle属性，无法被 Bootstrap 5 的JS逻辑识别，无法触发折叠动作。
• 折叠触发按钮未绑定对应的折叠容器，点击时找不到需要操作的目标元素。

修复步骤 #

1. 调整导航栏折叠按钮的属性：将原有data-toggle="collapse"替换为data-bs-toggle="collapse"，同时新增data-bs-target="#navbarContent"属性，属性值和后续折叠容器的ID保持一致。
2. 给带有collapse navbar-collapse类的div容器添加id="navbarContent"，完成触发按钮和折叠容器的绑定。

修复后的导航栏代码参考 #

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Noticias sobre a vacina</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav me-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="home.php"><i class="fas fa-home"></i> Home <span class="visually-hidden">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="cadastro_noticia.php"><i class="fas fa-clipboard-list"></i> Cadastro de noticia </a>
                </li>
                <li class="nav-item dropdown">
            </ul>
            <form class="form-inline my-2 my-md-0">
                <a class="nav-link active" href="index.php"><i class="fas fa-sign-out-alt"></i>Sair</a>
            </form>
        </div>
    </div>
</nav>

可选优化说明 #

Bootstrap 5 中已将旧版本的右间距类mr-auto更新为me-auto，屏幕阅读器专属类sr-only更新为visually-hidden，以上修改不影响折叠功能，可根据需求自行调整。

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