Bootstrap5小屏设备点击导航栏图标不展示下拉内容问题求助

故障原因 #

你使用的Bootstrap 5与旧版本语法存在核心差异，同时代码结构存在错误，共同导致导航栏折叠按钮失效：

• Bootstrap 5 对所有交互组件的自定义数据属性新增了bs-命名空间，旧版的data-toggle、data-target属性已被废弃
• 你的导航栏<nav>代码错误放置在<head>标签内，不属于页面渲染的内容区域
• Bootstrap 5 已将原有的左右边距类mr-*（margin-right）、ml-*（margin-left）替换为符合逻辑流命名的me-*（margin-end）、ms-*（margin-start）

具体修改步骤 #

1. 将<head>标签内的整段<nav>代码剪切，粘贴到<body>标签的最开头位置（<header class="jumbotron">之前）
2. 修改导航栏折叠按钮的属性，将原有data-toggle="collapse" data-target="#Navbar"替换为data-bs-toggle="collapse" data-bs-target="#Navbar"
3. 将代码中所有mr-auto替换为me-auto，保证对齐逻辑正常生效

修改后的导航栏代码片段参考 #

<nav class="navbar navbar-dark navbar-expand-sm bg-secondary fixed-top">
    <div class="container">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Navbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand me-auto" href="#"> RestaurantE Con~Fusion</a>
        <div class="collapse navbar-collapse" id="Navbar">
            <ul class="navbar-nav me-auto">
                <li class="nav-item"><a class="nav-link active" href="./index.html">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="./aboutus.html">About us</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
            </ul>
        </div>
    </div>
</nav>

可选优化 #

Bootstrap 5 已内置Popper.js且不再依赖jQuery，你可以直接引入bootstrap.bundle.min.js替代现有的三个JS引入语句，减少资源加载：

<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

内容的提问来源于stack exchange，提问作者Bhuvan R J