我正在处理一个Meteor项目,我的导航栏应该具有Bootstrap提供的折叠功能。以下是我的导航代码:
<!-- Navigation, via bootstrap -->
<nav class="navbar navbar-default navbar-fixed-top">
<section class="container-fluid">
<section class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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" href="{{ pathFor 'home' }}"><i class="fa fa-usd"></i> AccountedFor</a>
</section>
<!-- collapse? -->
<section class="collapse navbar-collapse" id="collapse-1">
<ul class="nav navbar-nav">
{{#if currentUser}}
<p class="navbar-text">|</p>
<li><a href="{{pathFor 'categories'}}">Manage Categories</a></li>
{{/if}}
<p class="navbar-text">|</p>
<li><a href="{{pathFor 'about'}}">About</a></li>
</ul>
<section class="navbar-right">
<p class="navbar-text">
{{> loginButtons align="right"}}
</p>
</section>
</section> <!-- end collapse -->
</section>
</nav>
这是我单击应扩展菜单的按钮后当前栏的样子。
这是条形图,当它具有足够的宽度而无需折叠时,所有条目可见:
当窗口大小合适时,显示适用的切换按钮没有问题,但是我期望的折叠功能不会发生。有人在乎提供一些建议吗?提前谢谢:
http://jsfiddle.net/bfo38kb1/ <-这个小提琴说明了我遇到的问题。
bootstrap.js文件丢失在您的小提琴中。
包括它使其工作。
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句