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>