[英]Navbar button not working on small devices
所以基本上當我嘗試在小型設備上打開我的網站時，我將引導導航欄設置為折疊但按鈕不起作用。 我將非常感謝一些幫助。 其他一切都在工作，但這是我無法工作的一件事。 我已經嘗試了我能想到的一切。
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressions</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav id="navbar" class="navbar fixed-top navbar-custom navbar-expand-sm">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto mr-auto">
<li class="nav-item">
<a class="nav-link py-1 d-none d-md-inline-block active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 d-none d-md-inline-block" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 d-none d-md-inline-block" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 d-none d-md-inline-block" href="#about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="index.js"charset="UTF-8"></script>
</body>
</html>
由於d-none class，您的菜單項未顯示
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Impressions</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> </head> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <nav id="navbar" class="navbar fixed-top navbar-custom navbar-expand-sm"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav mx-auto mr-auto"> <li class="nav-item"> <a class="nav-link py-1 d-md-inline-block active" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link py-1 d-md-inline-block" href="#skills">Skills</a> </li> <li class="nav-item"> <a class="nav-link py-1 d-md-inline-block" href="#projects">Projects</a> </li> <li class="nav-item"> <a class="nav-link py-1 d-md-inline-block" href="#about">About</a> </li> </ul> </div> </div> </nav> <:-- JavaScript Bundle with Popper --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> <script src="index.js"charset="UTF-8"></script> </body> </html>
這可能是由於d-none class 是display: none; . 將其更改為display: flex; 例如。 您可以參考 flexbox 的文檔以獲取更多信息。 最好的。
單擊小型設備上的切換按鈕時，Bootstrap導航欄將消失
[英]Bootstrap navbar will disappear when clicking the toggle button on small devices
切換按鈕折疊在引導程序中的Bootstrap導航欄中不起作用
[英]Toggle button collapse not working in Bootstrap navbar in bootstrap
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.