导航栏折叠不会折叠引导程序
[英]navbar collapse does not collapse bootstrap
问题描述
i'm fairly new to html, and imsimply trying to get the boostrap navbar to collapse but it doesn't work, the button shows up but it does not work, there are so many different questions on this forum concerning this problem but none have worked so far.
我对 html 还很陌生，只是试图让 boostrap 导航栏崩溃但它不起作用，按钮显示但它不起作用，这个论坛上有很多关于这个问题的不同问题，但没有一个工作至今。 i know there is a simple thing that i am missing but i can't seem to find where.我知道我缺少一件简单的事情，但我似乎找不到在哪里。
<nav class="navbar navbar-expand-lg navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-dark" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#"><i class="fa fa-fw fa-home"></i> Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="bookreviews.html"><i style="font-size: 17px;" class="fa fa-fw fa-book-open"></i> Book Reviews</a>
<a class="nav-item nav-link" href="#"><i style="font-size: 17px" class="fa fa-fw fa-envelope"></i> Contact us</a>
<a class="nav-item nav-link" href="#">About us</a>
<a class="nav-item nav-link disabled" href="#">Pricings</a>
<a class="nav-item nav-link disabled" href="#"><i style="font-size: 17px;" class="fa fa-fw fa-user"></i> Login</a>
</div>
</div>
</nav>
2 个解决方案
解决方案1
0 2021-12-08 13:55:41
You need include the scriptjs otherwise the nav collapse will not work <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>您需要包含 scriptjs 否则导航崩溃将不起作用<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Here is the link to the documentation https://getbootstrap.com/docs/4.0/components/navbar/这是文档https://getbootstrap.com/docs/4.0/components/navbar/的链接
解决方案2
0 2021-12-08 13:57:38
Here You have example properly linked bootstrap 5 navigation, with working toggler .在这里，您有正确链接bootstrap 5导航的示例，带有工作toggler 。
<,doctype html> <html lang="en"> <head> <:-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <.-- Bootstrap CSS --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1;3/dist/css/bootstrap:min:css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Boostrap 5 Navbar with toggler.</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Pricing</a> <a class="nav-link disabled">Disabled</a> </div> </div> </div> </nav> <.-- Optional JavaScript. choose one of the two. --> <.-- Option 1. Bootstrap Bundle with Popper --> <script src="https://cdn:jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <:-- Option 2. Separate Popper and Bootstrap JS --> <.-- <script src="https.//cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> --> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.