navbar collapse not working in bootstrap
Question
try to start learning about Bootstrap. i create little code to create responsive menu, like this
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Application Name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="JS/bootstrap.js"></script>
</body>
</html>
my question is, why when i try to select menu in small browser, menu does not show ? can some one tell me why? thanks
3 answers
solution1
14 ACCPTED 2013-12-12 07:50:41
My geuss is that you didn't load jQuery. Place this in your header and see if it works:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Also i suggest to load the bootstrap js file also in the header, just after the jQuery library.
solution2
5 2013-12-12 07:50:37
It is most likely because the bootstrap.js script relies on jQuery to work. Try including jQuery before bootstrap.js
solution3
0 2014-09-17 22:17:42
Not sure if this helps but I noticed that on the bootstrap site its tells you to link js files in the footer.
I also had wordpress place them in my header as i had to enqueue the scripts in my functions.php file. Once i removed the link to the jquery.js file and bootstrap-min.js in the footer the nav button began to collapse correctly.
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.