Bootstrap导航栏Toggle Button不显示问题排查求助

问题根源分析 #

• Bootstrap版本不兼容：你引入的Bootstrap CSS是v4.1.3，但JavaScript用的是v5.2.0，两个版本的类名、属性和JS逻辑不匹配，直接导致toggle按钮无法正常渲染和工作。
• HTML语法错误：<nav>标签的起始标签未闭合（缺少>），导致浏览器DOM解析异常，影响导航栏整体结构。
• 重复class属性：导航链接的<a>标签重复定义了class属性，不符合HTML规范，会导致样式和交互失效。
• 注：你怀疑的opacity属性不会导致按钮消失，只是让导航栏半透明，不是核心问题。

修复后的完整代码 #

HTML代码 #

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">

    <!-- 统一使用Bootstrap 5版本的CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="room.css">

    <title>Museum of Candy</title>
</head>

<body>
  <!-- 修复nav标签闭合问题 -->
  <nav class="navbar bg-dark">
    <div class="container-fluid">
      <span class="navbar-brand mb-0 h1">Navbar</span>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <!-- 合并重复的class属性 -->
            <a class="navbar-brand mb-0 h1 nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="navbar-brand mb-0 h1 nav-link" href="#">Link</a>
          </li>
        </ul>
       
      </div>
    </div>
  </nav>

   <!-- JavaScript Bundle with Popper -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  
</body>
</html>

CSS代码（保留你的自定义样式） #

body {
    background-color: pink;
}

.navbar.bg-dark{
    opacity: 0.75;
}

.navbar-brand.mb-0.h1{
    color: white;
}

关键修复说明 #

1. 统一Bootstrap版本：将CSS替换为Bootstrap 5.2.0的对应文件，确保CSS和JS版本一致，避免组件逻辑冲突。
2. 修复HTML语法错误：闭合<nav>标签，合并<a>标签的重复class属性，保证DOM结构和属性符合规范。
3. 保留自定义opacity样式：这个设置仅影响导航栏透明度，不会干扰toggle按钮的功能，可按需保留。

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