Twitter Bootstrap 3导航栏

Question

我在网站上使用Twitter Bootstrap。 尝试制作导航栏时，看不到折叠按钮。 这是我的代码：

<div class="navbar navbar-fixed-top" role="navigation" id="navigation">
    <div class="navbar-inner">
        <div class="container">
            <div class="navbar-header">
                <a class="btn btn-default navbar-toggle" data-toggle="collapse" data-target="collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="gryphicon gryphicon-align-justify"></span>
               </a>
               <a class="navbar-brand" href="/index" id="brand">eTalk</a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav" id="navi">
                    <li><a href="/index">Etusivu</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

它可以在笔记本电脑上正常工作，但是当我在平板电脑上查看时，它看起来像这样： https : //imageshack.com/i/pdef92a1j

在我的手机中，它看起来像这样： https : //imageshack.com/i/pc43413aj

导航链接消失。 如何显示折叠按钮？

我提供了Bootstrap CSS，JavaScript和最新的jQuery。

有什么建议么？

Answer 1

您的问题出在以下代码行中：

<span class="gryphicon gryphicon-align-justify"></span>

应该是：

<span class="glyphicon glyphicon-align-justify"></span>

演示JSFiddle

Answer 2

来自网站的示例+您的东西。

切换链接的data-target与.collapse元素的id不同（collapse！= navbar-collapse）现在，这只是默认的bs-example-navbar-collapse-1

在引导程序中，请注意类名和正确的层次结构。 请务必先检查其文档。

<div class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="glyphicon glyphicon-align-justify">Toggle</span>
            </a>
            <a class="navbar-brand" href="/index">eTalk</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav" id="navi">
                <li><a href="/index">Etusivu</a></li>
            </ul>
        </div>
    </div>
</div>