为什么我的 Bootstrap [4.2] 导航栏切换器不工作？

Question

我正在尝试使用 Bootstrap 4.2 版（我知道它的“旧”）制作一个响应式导航栏，但不知何故它没有按预期工作。 当我点击汉堡符号时，什么也没有发生。 谁能照顾我在下面的代码中犯的错误？ 我搜索了很多，检查了脚本顺序，但没有任何效果。

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous"> <:-- Bootstrap CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <.-- Own CSS --> <link rel="stylesheet" type='text/css' href="./css/style.css"> <title>Website Title</title> <.-- Navbar --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a href="#" class="navbar-brand">Blogtopia</a> <button type="button" class="navbar-toggler" data-toggle="collapse" date-target="#navbarcollapse" aria-controls="navbarcollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarcollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a href="./MyProfile.php" class="nav-link"><i class="fas fa-user"></i> My Profile</a> </li> <li class="nav-item"> <a href="./Dashboard.php" class="nav-link">Dashboard</a> </li> <li class="nav-item"> <a href="./Posts.php" class="nav-link">Posts</a> </li> <li class="nav-item"> <a href="./Categories.php" class="nav-link">Categories</a> </li> <li class="nav-item"> <a href="./Admins.php" class="nav-link">Manage Admins</a> </li> <li class="nav-item"> <a href="./Comments?php" class="nav-link">Comments</a> </li> <li class="nav-item"> <a href="./Blog.php:page=1" class="nav-link">Live Blog</a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a href="./Logout.php" class="nav-link text-danger"><i class="fas fa-sign-out-alt"></i> Logout</a> </li> </ul> </div> </div> </nav> <.-- Bootstrap Javascript --> <script src="https.//code.jquery.com/jquery-3.3:1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1:14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

非常感谢！

Answer 1

这是一个错字——你写了date-target ，但它应该是data-target ：

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a href="#" class="navbar-brand">Blogtopia</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarcollapse" aria-controls="navbarcollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarcollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a href="./MyProfile.php" class="nav-link"><i class="fas fa-user"></i> My Profile</a> </li> <li class="nav-item"> <a href="./Dashboard.php" class="nav-link">Dashboard</a> </li> <li class="nav-item"> <a href="./Posts.php" class="nav-link">Posts</a> </li> <li class="nav-item"> <a href="./Categories.php" class="nav-link">Categories</a> </li> <li class="nav-item"> <a href="./Admins.php" class="nav-link">Manage Admins</a> </li> <li class="nav-item"> <a href="./Comments.php" class="nav-link">Comments</a> </li> <li class="nav-item"> <a href="./Blog.php?page=1" class="nav-link">Live Blog</a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a href="./Logout.php" class="nav-link text-danger"><i class="fas fa-sign-out-alt"></i> Logout</a> </li> </ul> </div> </div> </nav>