Bootstrap导航栏移动端下拉菜单点击无响应问题修复求助

问题修复方案 #

你的导航栏点击无响应、无法折叠收纳的问题由4个核心错误导致，对应修改方法如下：

• 版本不兼容：你引入了Bootstrap 5的CSS，但配套JS用的是Bootstrap 4的版本，且Bootstrap 5的触发属性前缀从data-改为data-bs-，旧属性无法触发折叠效果。
• 结构不符合规范：导航折叠容器没有添加collapse、navbar-collapse类，无法被折叠组件识别，同时导航栏缺少navbar-expand-md类来控制响应式展开的断点。
• 媒体查询逻辑错误：小屏幕样式中直接给#navbarNav设置了display: none，会覆盖Bootstrap折叠组件的显示逻辑，导致点击按钮也无法弹出菜单。
• 导航列表类名错误：导航列表的class写为navbar，正确应为navbar-nav，否则会出现布局错乱。

修复后完整代码

HTML代码

<!doctype html>
<html lang="en">
<head>
    <title>DEV RESTAURANT</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link rel="stylesheet" href="restaurant.css"> 
    <link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,900;1,900&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <nav id="header-nav" class="navbar navbar-expand-md navbar-light">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="restaurant.html">
                        <img id="logo-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Burger_King_logo_%281999%29.svg/640px-Burger_King_logo_%281999%29.svg.png" alt="burger king">
                    </a>
                    <a id="brand-name" href="restaurant.html">Burger King</a>
                </div>
                <!-- 修改为Bootstrap5标准触发属性 -->
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- 新增collapse、navbar-collapse类 -->
                <div class="collapse navbar-collapse" id="navbarNav">
                    <!-- 修改class为navbar-nav，添加ms-auto让导航靠右 -->
                    <ul id="nav-list" class="navbar-nav ms-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="menu-categories.html"><i class="fas fa-utensils"></i><br>Menu</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="menu-categories.html"><i class="fas fa-info-circle"></i><br>About</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="menu-categories.html"><i class="fas fa-award"></i><br>Awards</a>
                        </li>
                        <li id="phone" class="nav-item active">
                            <a class="nav-link" href="tel: 222-222-222"><span>222-222-222</span></a>
                            <div>*We deliver</div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
   
    </header> 

    <!-- 替换为Bootstrap5对应JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>

CSS代码

body {
    font-size: 16px;
    background-color: #61122f;
    font-family: 'Oxygen', sans-serif;
}
#header-nav {
    background-color: gold;
}
.navbar-brand {
    padding-top: 15px;
}
#logo-img {
    width: 150px;
    height: 150px;
    margin: 10px 15px 10px 0px;
    margin-left: -6%;
}
#brand-name {
    font-family: 'Exo', sans-serif;
    font-size: 45px;
    color: #ef151e;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
}
#nav-list {
    list-style-type: none;
}
#nav-list a {
    color: #61122f;
    text-align: center;
}
#nav-list a:hover {
    background: floralwhite;
}
#nav-list a i {
    font-size: 1.8em;
}
#phone a {
    text-align: right;
    padding-bottom: 0px;
    font-size: 25px;
    font-weight: 600;
}
#phone div {
    color: #557c3e;
    text-align: right;
    padding-right: 20px;
}
.navbar-toggler {
    margin-right: 0;
}
/* 删除错误的#navbarNav隐藏规则，保留logo隐藏逻辑 */
@media(max-width: 768px){
    .navbar-header {
        float: left;
    }
    #logo-img {
        display: none;
    }
}

修改后即可实现小屏幕点击按钮展开折叠菜单、中大屏幕直接显示导航项的效果。

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