为什么不在小屏幕上打开引导程序导航栏?
问题描述:
这个nav-bar
在屏幕大于640px
时工作正常,但是当菜单按钮显示在小屏幕上时,点击它不会显示菜单项。这里是site。为什么不在小屏幕上打开引导程序导航栏?
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#BHC-Navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bunker Hill</a>
</div>
<div class="collapse navbar-collapse" id="BHC-Navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
<li><a href="#services" class="glyphicon glyphicon-info-sign"> Services</a></li>
<li><a href="#clients" class="glyphicon glyphicon-info-sign"> Clients</a></li>
<li><a href="#about" class="glyphicon glyphicon-info-sign"> About</a></li>
<li><a href="#contact"><i class="glyphicon glyphicon-envelope"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
答
你缺少的bootstrap.min.js
所以你需要添加像这样:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
编辑
您需要加载此js文件之前添加jQuery库。
答
它看起来不像你在任何地方调用bootstrap.js或bootstrap.min.js。调用该脚本,你应该很好去。
+0
我添加了对它的引用,但它仍然不起作用。 –
谢谢。它丢失了,但我添加了它,它仍然不起作用。 –
您需要在加载此js文件之前添加jQuery库。我不确定何时使用角度,但试试 – dippas
这样做。我没有意识到bootstrap依赖于jquery。 –