Bootstrap Navbar无法在手机或平板电脑上折叠
[英]Bootstrap Navbar not collapsing on mobile or tablet
问题描述
Im having problems with my Bootstrap not collapsing down. 
我在Bootstrap崩溃时遇到问题。 I'm not sure why its not working. 我不确定为什么它不起作用。 hope someone can be of help thanks. 希望有人能有所帮助谢谢。 I am a newbie so please be gentle. 我是新手，所以请保持温柔。
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="smoothScroll" href="#work">Work</a>
</li>
<li>
<a class="smoothScroll" href="#team">Team</a>
</li>
<li>
<a class="smoothScroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
3 个解决方案
解决方案1
0 2014-11-04 10:33:31
You probably haven't included the bootstrap.js file. 您可能还没有包含bootstrap.js文件。 It has the code to make the navbar collapse work. 它具有使导航栏折叠工作的代码。 It is the most common mistake that newbies face. 这是新手面临的最常见的错误。 I know I did. 我知道我做到了
Another case where the navbar collapse did not work. 导航栏崩溃的另一种情况不起作用。
解决方案2
0 2014-11-04 10:36:55
As per my comment, the most likely cause is you are missing the relevant javascript and css files. 根据我的评论，最可能的原因是您缺少相关的javascript和css文件。
The HTML appears to be fine, and although you say it doesn't work on a phone or tablet, I'd suspect if you shrink the browser width, it too won't work on a desktop. HTML看起来不错，尽管您说它不能在手机或平板电脑上使用，但我怀疑您是否缩小了浏览器的宽度，但它也不能在桌面上使用。
Adding the relevant CSS and javascript files will resolve this issue. 添加相关的CSS和javascript文件将解决此问题。
Update 更新资料
Based upon the comments of this post, the issue was an "old version of jquery." 根据这篇文章的评论，问题是“旧版本的jquery”。
解决方案3
0 2014-11-04 11:57:30
Code like this: 像这样的代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" />
</head>
<body>
<form id="form1" runat="server">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="smoothScroll" href="#work">Work</a>
</li>
<li>
<a class="smoothScroll" href="#team">Team</a>
</li>
<li>
<a class="smoothScroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.