Bootstrap 4 下拉菜单没有显示？

Question

我尝试了不同的代码，但不管我做什么，我在 bootsrap 上的下拉菜单都没有出现，它旁边有一个箭头，但按下时什么也没有显示。如果有人能告诉我我在代码中做错了什么或可能导致问题的原因，我将不胜感激

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">///</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">


      <span class="navbar-toggler-icon"> </span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">

      </ul>
      <ul class="navbar-nav">

          <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">About</a>
          </li>

          <div class="dropdown">
              <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Projects
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                  <button class="dropdown-item" type="button">Younity Beauty</button>
                  <button class="dropdown-item" type="button">Xplore</button>
              </div>
          </div>


          <div class="dropdown">
              <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Hobbies
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                  <button class="dropdown-item" type="button">Photography</button>
                  <button class="dropdown-item" type="button">Design</button>
                  <button class="dropdown-item">Painting</button>




              </div>
          </div>

          </li>
      </ul>
  </div>

Answer 1

我不想影射但是你有没有把imported/includedbootstrap正确地融入你的项目中？

如果您还没有或不确定，请完成这个小教程。 https://www.w3schools.com/bootstrap/bootstrap_get_started.asp

如果您正确地包含了 bootstrap，抱歉，我不确定您的错误在哪里。我自己还不够熟练哈哈

Answer 2

Bootstrap nav-bar 需要 javascript。检查您的 html 是否如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- Bootstrap css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>

<body>

    <!-- Your Nav-Bar -->


    <!-- Bootstrap javascript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>
</html>

添加这部分很重要：

<!-- Bootstrap javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Bootstrap 4 下拉菜单没有显示？

Bootsrap 4 dropdown menu is not showing?

drop-down-menu

bootstrap-4