Bootstrap5移动端模式下无法实现带关闭按钮的全宽导航菜单问题

问题排查与修正方案 #

你代码的核心错误是使用了Bootstrap 4的触发属性，不兼容你引入的Bootstrap 5版本，具体修改点如下：

• 将导航触发按钮的data-toggle替换为data-bs-toggle，data-target替换为data-bs-target，这是Bootstrap 5对自定义数据属性的统一调整规则，旧属性无法触发折叠逻辑
• 若要实现展开后全宽效果，可给.navbar-collapse添加w-100类，配合自定义样式限制展开后的高度与边距
• 参考效果中的关闭按钮为额外添加的元素，你可在折叠菜单的头部新增一个关闭按钮，绑定对应属性实现点击收起功能

修正后的完整代码如下：

<nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
        <a class="navbar-brand" href="#"><img src="images/GEPL-Capital-Logo.webp"></a>
        <!-- 修改触发按钮的data属性为Bootstrap 5规范 -->
        <button class="navbar-toggler" style="margin-right:5px !important;" 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>
        <div class="collapse navbar-collapse top_nav w-100" id="navbarSupportedContent">
            <!-- 新增移动端专属关闭按钮 -->
            <button class="btn-close d-lg-none ms-auto mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-label="Close"></button>
            <ul class="navbar-nav mx-auto ">
                <li class="nav-item">
                    <a href="#" class="nav-link">Home</a>
                    <hr class="hr_nav">
                </li>
                <li class="nav-item "><a href="#" class="nav-link">About Us</a>
                </li>
                <li class="nav-item "><a href="#" class="nav-link">Support</a>
                </li>
                <li class="nav-item "><a href="#" class="nav-link">Contact Us</a>
                </li>
            </ul>
            <ul class="navbar navbar-nav navbar-right" style="display:flex;">
                <li>
                    <button class="btn top_login">
                    Login
                </button>
                </li>
                <li>
                    <button class="btn sign_btn">
                    SignUp
                </button>
                </li>
            </ul>
        </div>
    </div>
</nav>

修改后即可实现移动端点击汉堡按钮展开全宽菜单、点击关闭按钮收起的效果。

内容的提问来源于stack exchange，提问作者Mr.M