Bootstrap 折疊響應式導航欄在小屏幕上打開后關閉
[英]Bootstrap collapse responsive navbar closes back after opening it when on small screen
問題描述
導航欄在大屏幕上工作正常，但是當您轉到移動屏幕時，按下折疊圖標后折疊會關閉。
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body style="background-color: #7e9094;"> <nav style="background-color: #213239;" class="navbar navbar-expand-lg navbar-dark"> <a class="navbar-brand active" href="index.html">Home</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" data-target="#demo" id="navbarText"> <ul class="navbar-nav" id="demo"> <li class="nav-item"> <a class="nav-link" href="shop/shop.html">Shop</a> </li> <li class="nav-item"> <a class="nav-link" href="projects/projects.html">Projects</a> </li> </ul> <span class="navbar-text"><a class="nav-link" href="index.html"><img style="float: right;" width="10%" src="img/image.img"></a></span> </div> </nav> </body> </html>
2 個解決方案
解決方案1
0 2020-11-18 16:29:10
只需更新 JavaScript 的 CDN 鏈接以匹配 CSS。 兩者都需要在 4.x 版本上。
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body style="background-color: #7e9094;"> <nav style="background-color: #213239;" class="navbar navbar-expand-lg navbar-dark"> <a class="navbar-brand active" href="index.html">Home</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" data-target="#demo" id="navbarText"> <ul class="navbar-nav" id="demo"> <li class="nav-item"> <a class="nav-link" href="shop/shop.html">Shop</a> </li> <li class="nav-item"> <a class="nav-link" href="projects/projects.html">Projects</a> </li> </ul> <span class="navbar-text"><a class="nav-link" href="index.html"><img style="float: right;" width="10%" src="img/image.img"></a></span> </div> </nav> </body> </html>
解決方案2
0 2020-11-18 16:59:35
它只是對@isherwood 和@MrUpsidown 的回答的補充。
實際上，您的代碼中有不兼容的 css、jquery 和 bootstrap 版本。
如果你想使用最新版本的 Bootstrap，你應該像上面答案中的一個例子一樣。 這意味着您需要與 bootstrap 版本相同的 css 版本，即 4.3.1。 也推薦使用 jquery slim build。 您可以閱讀有關Bootstrap 4.3的“入門”指南的更多信息。
如果你真的需要 bootstrap 3.4.1（我相信這實際上是你的代碼中的一個錯字），你需要不同的 css 和 jquery，因為它遵循Bootstrap 3.4的“入門”指南一個導航欄的例子你可以在這里找到引導程序的版本。
在這種情況下，您的代碼將是這樣的：
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body style="background-color: #7e9094;"> <nav style="background-color: #213239;" class="navbar navbar-expand-lg navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarText" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Home</a> </div> <div class="collapse navbar-collapse" data-target="#demo" id="navbarText"> <ul class="navbar-nav" id="demo"> <li class="nav-item"> <a class="nav-link" href="shop/shop.html">Shop</a> </li> <li class="nav-item"> <a class="nav-link" href="projects/projects.html">Projects</a> </li> </ul> <span class="navbar-text"> <a class="nav-link" href="index.html"><img style="float: right;" width="10%" src="img/image.img"></a> </span> </div> </nav> </body> </html>
不過要小心。 3.4.1 和 4.3.1 實際上是不同的版本 :) 祝你好運！
Bootstrap 的問題：小屏幕（移動設備）上的導航欄折疊不起作用
[英]Problems with Bootstrap: Navbar collapse on small screens ( mobile) does not work
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.