bootstrap navbar不切换
[英]bootstrap navbar doesn't toggle
问题描述
When I try the mobile version of my jumbotron-based page, the navbar doesn't toggle. 
当我尝试基于jumbotron的页面的移动版本时，导航栏不会切换。 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. 这是我的页面 ，它基于jumbotron但是当按下右上角的按钮时，导航栏折叠不起作用，它不会切换。
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 个解决方案
解决方案1
3 已采纳 2016-06-29 11:31:04
Please try to check your bootstrap.min.js or bootstrap.js. 请尝试检查您的bootstrap.min.js或bootstrap.js。 may be that are not loading properly. 可能是没有正确加载。
解决方案2
0 2016-06-29 11:45:42
Can you show us the part where you import bootstap and jquery ? 你能告诉我们导入bootstap和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. 这应按此顺序放在<head>中，以提供Bootstrap的正常功能。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.