Bootstrap 切换按钮在手机屏幕上不起作用？答案

【问题标题】：Bootstrap toggle button is not working on mobile screen?Bootstrap 切换按钮在手机屏幕上不起作用？
【发布时间】：2021-10-28 15:18:37
【问题描述】：

我正在使用 Bootstrap，但不知道为什么切换按钮不起作用我在互联网上搜索过但没有得到正确答案 StackOverflow 上有很多类似的问题，但它们也没有解决我的问题喜欢Bootstrap toggle button is not working 和bootstrap navbar toggle button is not working 所以请谁能告诉我为什么会这样。

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap 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">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>

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


<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>
        <button class="navbar-toggler" 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" 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>
            <button style="color:white;background: #1EB909;border: none;" type="button" class="btn btn-primary"><a
                style="color:white;background: #1EB909;" href="https://www.tutorinet.com/signup.php?type=1">Sign
                Up</a></button>
          </ul>
        </div>
      </div>
    </nav>

【问题讨论】：

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

您需要删除您拥有的引导脚本并包含 bootstrap.bundle.min.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>

div 中的 id 值也应该与按钮中的 data-bs-target 值相同

<div class="collapse navbar-collapse" id="navbarSupportedContent">

【讨论】：