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

Question

我希望当我切换到移动视图时，菜单项会折叠起来，当我单击它时，它会在下拉菜单中显示菜单。这段代码似乎不起作用，怎么了？

我想单击此图标并在下拉列表中显示菜单项。检查此图像 Mobile View

这是桌面视图中的样子Desktop View

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

然后脚本：

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

将此代码用于导航栏切换按钮

<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

嘿，你的按钮中有一些额外的文字

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

而不是使用 data-bs-toggle="collapse" 和 data-bs-target="#navbarSupportedContent" 你必须使用 data-toggle="collapse" 和 data-target="#navbarsExample01" 取出 bs正在使用 bootstrap 4 有关更多信息，您可以在 Bootstrap 官方网站上查看 de Docs。

另外不要忘记在代码末尾关闭 nav 标签

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

Bootstrap dropdown menu not working in mobile view

html

twitter-bootstrap