我已经检查了这个问题的类似答案,并在此设置了类似于此响应的代码,但仍无法使其工作:
bootstrap 3 navbar collapse button not working
我甚至尝试在Bootstrap 3站点上使用默认 navbar
的确切代码,但它仍然无效 .
我在头部包含了这两个链接,我的路径是正确的:
http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js“
我的相关代码:
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse role"="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">About</a></li>
<li><a href="#reviews">Reviews</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
2 回答
确保包含最新的jQuery库和Bootstrap的javascript文件 .
你做了几个小错误,这就是按钮不起作用的原因:
1)你在
<nav>
元素上有一个拼写错误的引号navbar-inverse role"="navigation"
2)你的
data-target
按钮应该是#nav-collapse
,因为它是一个id而不是一个类 .'s it, here'是 working 版本 .