时间戳

首页 > 解决方案 > Bootstrap 切换按钮在移动屏幕上不起作用？

javascript - Bootstrap 切换按钮在移动屏幕上不起作用？

问题描述

我正在使用 Bootstrap 但不知道为什么切换按钮不起作用按钮不起作用，并且引导导航栏切换按钮不起作用 所以请谁能告诉我为什么会这样。

<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>

标签： javascripthtmljquerycsstwitter-bootstrap

解决方案

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

推荐阅读