bootstrap navbar doesn't toggle
Question
When I try the mobile version of my jumbotron-based page, the navbar doesn't toggle. I want it to fold out like in the example but it doesn't. Maybe I'm missing some code, can you help me make it work? This screenshot is how it is supposed to look when the navbar folds out in [the example.
This is my page , which is based on jumbotron but the navbar foldout doesn't work when I press the button to the upper right, it doesn't toggle.
My code (identical to the example).
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<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="/">Customer Service</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right" action="/account/do_login" method="post">
<div class="form-group">
<input type="text" name="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
2 answers
solution1
3 ACCPTED 2016-06-29 11:31:04
Please try to check your bootstrap.min.js or bootstrap.js. may be that are not loading properly.
solution2
0 2016-06-29 11:45:42
Can you show us the part where you import bootstap and jquery ?
I believe the failure is there. Because for me the example is working. I had the same behaviour before bringing my imports into order.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
This should be placed in the <head> in this order to provide a proper functioning of Bootstrap.
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.