Bootstrap导航栏在从移动设备访问时不会崩溃，在收缩桌面浏览器时可以正常工作
[英]Bootstrap navbar doesn't collapse when visit from mobile device, works fine when I shrink desktop browser
问题描述
I have an index.html and require bootstrap.css and bootstrap.js.When I shrink desktop browser on my desktop, the navbar collapses properly. 
我有一个index.html并需要bootstrap.css和bootstrap.js。当我在桌面上收缩桌面浏览器时，导航栏会正常折叠。 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 个解决方案
解决方案1
0 2015-08-25 08:21:55
您需要在脚本中包含bootstrap.min.js ：
<script src="path/to/bootstrap.min.js"></script>
解决方案2
0 2015-08-25 08:22:08
You forgot to insert : bootstrap.min.js 您忘记插入：bootstrap.min.js
<script src="js/bootstrap.min.js"></script>
Also double String around js/bootstrap.min.js"" 还在js / bootstrap.min.js周围加上双倍字符串“”“
解决方案3
0 2015-08-25 08:38:13
Well, You inserted required files(jquery.min.js, bootstrap.css, bootstrap.js). 好了，您插入了必需的文件（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. 首先删除其他.CSS和.JS文件进行检查，然后可以更好地发现问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.