Bootstrap 折叠响应式导航栏在小屏幕上打开后关闭
[英]Bootstrap collapse responsive navbar closes back after opening it when on small screen
问题描述
The navbar works fine on the big screen but when you go to a mobile screen the collapse closes back after pressing the collapse icon.
导航栏在大屏幕上工作正常，但是当您转到移动屏幕时，按下折叠图标后折叠会关闭。
<!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
Just update the CDN link for your JavaScript to match the CSS.只需更新 JavaScript 的 CDN 链接以匹配 CSS。 Both need to be on the 4.x version.两者都需要在 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
it is just a supplement to the answer of @isherwood and @MrUpsidown.它只是对@isherwood 和@MrUpsidown 的回答的补充。
Indeed, you have incompatible css, jquery and bootstrap versions in your code.实际上，您的代码中有不兼容的 css、jquery 和 bootstrap 版本。
If you want to use the latest version of Bootstrap, you should do like in an example from the answer above.如果你想使用最新版本的 Bootstrap，你应该像上面答案中的一个例子一样。 It means you need the same version of css as the version of bootstrap is, 4.3.1.这意味着您需要与 bootstrap 版本相同的 css 版本，即 4.3.1。 It is also recommended to use jquery slim build.也推荐使用 jquery slim build。 You could read more on the'Getting started' guide for Bootstrap 4.3 .您可以阅读有关Bootstrap 4.3的“入门”指南的更多信息。
If you actually need the bootstrap 3.4.1 (that actually was a typo in your code, I believe), you need different css and jquery for it as it follows from the 'Getting started' guide for Bootstrap 3.4 An example of navbar for that version of bootstrap you can find here .如果你真的需要 bootstrap 3.4.1（我相信这实际上是你的代码中的一个错字），你需要不同的 css 和 jquery，因为它遵循Bootstrap 3.4的“入门”指南一个导航栏的例子你可以在这里找到引导程序的版本。
In this case your code will be something like this:在这种情况下，您的代码将是这样的：
<!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>
But be careful.不过要小心。 3.4.1 and 4.3.1 are actually different versions :) Good luck with that! 3.4.1 和 4.3.1 实际上是不同的版本 :) 祝你好运！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.