为什么 Navbar Collapse 对我使用 Bootstrap 不起作用？

Question

我在使用 Bootstrap 时遇到问题， 导航栏折叠 按钮不起作用我尝试了所有可能的方法并且按照我正在观看的教程中提到的每个步骤进行操作。如何在不更改注册和登录按钮的情况下让它为我工作？请帮助我。

这是我的 html 代码：

body{
  background-color: #F7F7F7;
  font-family: Montserrat-Medium;
}

ul{
  list-style-type:none;
}

.navbar-brand{
  color: black;
  font-family: Montserrat-Medium;
  margin-left: 150px;
  text-align: center;
}
.nav-brand-text{
}

.nav-signup{
  background-color: #5E99EF;
  color: white;
  border: none;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-top: 4px;
  border-radius: 46px;
}
.nav-signup:hover{
  background-color: #4E83CF;
  color: #EAEAEA;
}

.nav-login{
  border: 5px solid black;
  border-color: #5E99EF;
  color: #5E99EF;
  padding: 11px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-top: 4px;
  border-radius: 46px;
  white-space: nowrap;
}
.nav-login:hover{
  color: #4E83CF;
  background-color: #EAEAEA;
}

.nav-items-row{
  margin-right: 150px;
}

<body>
  <nav class="navbar navbar-expand-md navbar-fixed-top navbar-light bg-white shadow-sm p-4 mb-5">
    <div class="container-fluid">
      <div class="nav-header">
        <button type="button" class="navbar-toggler position-absolute start-1" data-toggle="collapse" data-target=".navbar-submenu">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="col-md">
          <a class="navbar-brand" href="#">
            <img src="res/logo.png" width="40" height="40" class="" alt=""></img><b> Tbadel.ma</b>
          </a>
        </div>
     </div>
     <div class="collapse navbar-collapse navbar-submenu">
        <ul class="nav nav-items-row position-absolute end-0">
          <ul class="col-md">
           <li><a href="#" class="nav-signup">S'identifier</a></li>
         </ul>
          <ul class="col-md">
          <li><a href="#" class="nav-login">Se connecter</a></li>
        </ul>
      </ul>
         </div>
        </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>

  </body>

Answer 1

在 bootstrap5 中，标签有一些变化，例如：data-toggle 更改为 data-bs-toggle 和 data-target 到 data-bs-target

所以当使用 data-bs-target 目标 id of div 而不是 class.

body{
  background-color: #F7F7F7;
  font-family: Montserrat-Medium;
}

ul{
  list-style-type:none;
}

.navbar-brand{
  color: black;
  font-family: Montserrat-Medium;
  margin-left: 150px;
  text-align: center;
}
.nav-brand-text{
}
.navbar-toggler {
  z-index: 1;
}
.nav-signup{
  background-color: #5E99EF;
  color: white;
  border: none;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-top: 4px;
  border-radius: 46px;
}
.nav-signup:hover{
  background-color: #4E83CF;
  color: #EAEAEA;
}

.nav-login{
  border: 5px solid black;
  border-color: #5E99EF;
  color: #5E99EF;
  padding: 11px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-top: 4px;
  border-radius: 46px;
  white-space: nowrap;
}
.nav-login:hover{
  color: #4E83CF;
  background-color: #EAEAEA;
}

.nav-items-row{
  margin-right: 150px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-light bg-white shadow-sm p-4 mb-5">
  <div class="container-fluid">
    <div class="nav-header">
      <button type="button" class="navbar-toggler position-absolute start-1 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-submenu" aria-expanded="false">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="col-md">
        <a class="navbar-brand" href="#">
          <img src="res/logo.png" width="40" height="40" class="" alt=""><b> Tbadel.ma</b>
        </a>
      </div>
   </div>
   <div class="collapse navbar-collapse" id="navbar-submenu">
      <ul class="nav nav-items-row position-absolute end-0">
        <ul class="col-md">
         <li><a href="#" class="nav-signup">S'identifier</a></li>
       </ul>
        <ul class="col-md">
        <li><a href="#" class="nav-login">Se connecter</a></li>
      </ul>
    </ul>
  </div>
</div>
</nav>


<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>

</body>

为什么 Navbar Collapse 对我使用 Bootstrap 不起作用？

Why Navbar Collapse isn't working for me using Bootstrap?

html

css

bootstrap-5