移动端Bootstrap切换按钮（toggle button）无法正常工作如何解决？

核心问题清单 #

• 版本冲突：同时引入了Bootstrap 5和Bootstrap 4两个大版本的CSS资源，且仅引入了Bootstrap 4的JS文件。Bootstrap 4和5的组件API、样式规则差异极大，混用会直接导致组件功能异常。
• ID对应错误：切换按钮的data-bs-target属性配置为#navbarSupportedContent，但实际折叠菜单的容器ID为navbarNav，二者不匹配，点击按钮找不到需要控制的目标元素。
• 依赖缺失：使用了Bootstrap 5专属的data-bs-*属性前缀来控制交互，但没有引入Bootstrap 5的JS文件以及其依赖的Popper.js，交互逻辑没有对应代码支撑。

修复代码示例 #

修正后的head资源引入 #

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 仅保留Bootstrap5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- 引入Bootstrap5依赖的Popper.js和Bootstrap5 JS -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="style.css">
  <title>TutorInet</title>
</head>

修正后的nav部分 #

<nav class="navbar navbar-expand-lg navbar-light ">
  <div class="container-fluid">
    <a style="font-weight: 500;">
      <h3 style="color:#4A4A4A;text-transform: uppercase;margin-top:8px;"> Tutor<span
          style="color:#F97C44;">I</span>net</h3>
    </a>
    <!-- 修改data-bs-target和aria-controls为实际的菜单ID navbarNav -->
    <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>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://www.tutorinet.com/blog.php">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://www.tutorinet.com/contact.php">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">How it works</a>
        </li>
        <li style="color:#1EB909;font-weight: 600;" class="nav-item">
          <a style="color:#1EB909;font-weight: 600;" class="nav-link" href="https://www.tutorinet.com/login.php">Log
            in</a>
        </li>
        <!-- 修正按钮未放在li标签内的HTML规范问题 -->
        <li class="nav-item">
          <button style="color:white;background: #1EB909;border: none;" type="button" class="btn btn-primary">
            <a style="color:white;" href="https://www.tutorinet.com/signup.php?type=1">Sign Up</a>
          </button>
        </li>
      </ul>
    </div>
  </div>
</nav>

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