为什么导航栏折叠对我使用 Bootstrap 不起作用？ [复制]答案

【问题标题】：Why Navbar Collapse isn't working for me using Bootstrap? [duplicate]为什么导航栏折叠对我使用 Bootstrap 不起作用？ [复制]
【发布时间】：2021-03-25 12:57:32
【问题描述】：

我在使用 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>

【问题讨论】：

标签： html css bootstrap-5

【解决方案1】：

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

所以当使用data-bs-targetid的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>

【讨论】：