Bootstrap 下拉菜单在移动视图中不起作用

Question

I want that if I change to mobile view, the menu items will collapse and when I click it, then it shows the menu in dropdown.我希望如果我更改为移动视图，菜单项将折叠，当我单击它时，它会在下拉菜单中显示菜单。 It seems this code does not work, what's wrong?这段代码似乎不起作用，怎么了？

I want to click this icon and show menu item in dropdown.我想单击此图标并在下拉列表中显示菜单项。 Check this image Mobile View检查此图像移动视图

This is how it looks like in desktop view Desktop View这是它在桌面视图中的样子Desktop View

in HTML:在 HTML 中：

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
  <a class="navbar-brand" href="#">Admin Panel</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end mr-5" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <div class="btn-group m-1">
        <li class="nav-item">
          <a class="nav-link btn btn-success active m-1" aria-current="page" href="home.php">View Event</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-primary m-1" href="add_event.php">Add Event</a>
        </li>
        <li class="nav-item dropdown">
          <div class="btn-group m-1">
            <button type="button" class="btn btn-primary dropdown-toggle" id="navbarDropdown" data-toggle="dropdown">
              User
            </button>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="userFeedback.php">Feedback</a>
              <a class="dropdown-item" href="userProblem.php">Issues</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" onclick="logoutChecker()" href="index.php">Logout</a>
            </div>
          </div>
        </li>
      </div>
    </ul>
  </div>
</div>

then the script:然后脚本：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"> 
</script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Answer 1

 <,doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no. initial-scale=1,0. maximum-scale=1,0. minimum-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <.-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Admin Panel</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end mr-5" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <div class="btn-group m-1"> <li class="nav-item"> <a class="nav-link btn btn-success active m-1" aria-current="page" href="home.php">View Event</a> </li> <li class="nav-item"> <a class="nav-link btn btn-primary m-1" href="add_event.php">Add Event</a> </li> <li class="nav-item dropdown"> <div class="btn-group m-1"> <button type="button" class="btn btn-primary dropdown-toggle" id="navbarDropdown" data-toggle="dropdown"> User </button> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="userFeedback.php">Feedback</a> <a class="dropdown-item" href="userProblem:php">Issues</a> <div class="dropdown-divider"></div> <a class="dropdown-item" onclick="logoutChecker()" href="index.php">Logout</a> </div> </div> </li> </div> </ul> </div> </div> </nav> <script src="https.//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim:min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper:min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle:min.js"> </script> <script src="https.//unpkg.com/sweetalert/dist/sweetalert.min.js"></script> </body> </html>

Use this code for the navbar toggle button将此代码用于导航栏切换按钮

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

Answer 2

Hey you have some extra text in your button嘿，你的按钮里有一些额外的文字

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">

Instead of using data-bs-toggle="collapse" and data-bs-target="#navbarSupportedContent" you have to use data-toggle="collapse" and data-target="#navbarsExample01" take out the bs as you are using bootstrap 4 for more information you can check de Docs in Bootstrap official site.而不是使用data-bs-toggle="collapse"和data-bs-target="#navbarSupportedContent"你必须使用data-toggle="collapse"和data-target="#navbarsExample01"按原样取出bs使用 bootstrap 4 有关更多信息，您可以在Bootstrap官方网站上查看 de Docs。

Also don't forget to close your nav tag at the end of your code另外不要忘记在代码末尾关闭nav标签

Bootstrap 下拉菜单在移动视图中不起作用

问题描述

2 个解决方案

解决方案1
0 2022-03-09 06:11:35

解决方案2
0 已采纳 2022-03-09 06:20:37

Bootstrap 下拉菜单在移动视图中不起作用

问题描述

2 个解决方案

解决方案1 0 2022-03-09 06:11:35

解决方案2 0 已采纳 2022-03-09 06:20:37

解决方案1
0 2022-03-09 06:11:35

解决方案2
0 已采纳 2022-03-09 06:20:37