data-bs-target="#navbarTogglerDemo01" 为什么这在 Bootstrap-5 上不起作用？

Question

通常，我希望在单击右侧的汉堡包菜单时看到 3 个链接。但是当我点击它时，它并没有显示联系方式、定价和下载这 3 个链接。我对互联网上的 Bootstrap-5 文档也做了同样的事情。

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


<h1>Hello World</h1>

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">

  <a class="navbar-brand" href="">Company</a>

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

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Download</a>
      </li>
    </ul>
    
  </div>
</nav>

Answer 1

折叠导航栏需要 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>

顺便说一句，你的代码是错误的。您需要在导航栏中添加 .container-fluid 或其他容器。检查文档：https://getbootstrap.com/docs/5.0/components/navbar/

Answer 2

嗯！我不知道它是否对你们所有人都有帮助，但它通过这样做帮助了我。删除 data-bs-toggle 到 data-toggle 并在下拉菜单按钮项中保留所有内容。我希望它能对你有所帮助，如果有的话，然后投票给我。在正文中也添加这个

href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" 
              integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
              crossorigin="anonymous" />
        <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 
                integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
                crossorigin="anonymous"></script>
        <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" 
                integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" 
                crossorigin="anonymous">

data-bs-target="#navbarTogglerDemo01" 为什么这在 Bootstrap-5 上不起作用？

data-bs-target="#navbarTogglerDemo01" why doesn't this work on Bootstrap-5?

bootstrap-5