繁体   English   中英

Bootstrap折叠移动导航栏不起作用

[英]Bootstrap collapse mobile navbar not working

我正在做一个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>&nbsp;&nbsp;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>

看到这个http://jsfiddle.net/bfo38kb1/1

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM