【问题标题】:Bootstrap collapse mobile navbar not workingBootstrap折叠移动导航栏不起作用
【发布时间】:2015-07-01 16:04:20
【问题描述】:

我正在做一个 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/

【问题讨论】:

  • 介意把它放在小提琴里还是什么的?
  • 我可以暂时试试。我可能不得不对其进行修改以使其正常工作,因为这是 Meteor 应用程序的一部分,如果没有应用程序存在,某些东西将无法工作。
  • 可以理解,但是如果不看更多内容,很难判断是什么导致了您的问题。
  • 你确定你的页面中包含了 bootstrap.js 吗?发生在我身上一次。
  • 按请求添加小提琴,原始问题中的链接。

标签: javascript html css twitter-bootstrap


【解决方案1】:

您的小提琴中缺少 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

【讨论】:

    猜你喜欢
    • 2015-11-14
    • 2021-10-19
    • 2013-08-10
    • 2017-10-23
    • 1970-01-01
    • 2021-11-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多