Bootstrap navbar doesn't collapse when visit from mobile device, works fine when I shrink desktop browser
Question
I have an index.html and require bootstrap.css and bootstrap.js.When I shrink desktop browser on my desktop, the navbar collapses properly. When I visit the site on my mobile device,everything is responsive EXCEPT the navbar,it doesn't collapse here is my code in head
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sylhet International University</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/loaders.min.css" />
<link rel="stylesheet" href="css/jquery.bxslider.css" />
<link rel="stylesheet" href="css/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/jquery.akordeon.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
in body
<!--Navigation Starts-->
<div class="navigation">
<nav class="navbar navbar-default navigation_bar scroll_border navbar-fixed-top">
<div class="container ">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">ADMISSION</a></li>
<li><a href="#">COURSES</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!--Navigation Ends-->
in footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/bootstrap.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
3 answers
solution1
0 2015-08-25 08:21:55
您需要在脚本中包含bootstrap.min.js ：
<script src="path/to/bootstrap.min.js"></script>
solution2
0 2015-08-25 08:22:08
You forgot to insert : bootstrap.min.js
<script src="js/bootstrap.min.js"></script>
Also double String around js/bootstrap.min.js""
solution3
0 2015-08-25 08:38:13
Well, You inserted required files(jquery.min.js, bootstrap.css, bootstrap.js).
I test your body code in bootstrap template. That's right. It works in Desktop and Mobile devices correctly.
I think some other files Caused this problem. First Remove other .CSS and .JS files to check it, and then You can find problem better.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.