2016-07-15 43 views
-1

請參閱下面的提琴。我覺得我越來越糊塗瞭如何創建一個可摺疊導航欄(顯示在較小的設備漢堡包菜單我在做什麼錯無法使用引導程序創建可摺疊的導航欄

https://jsfiddle.net/xnxcwqyp/

HTML:?

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
<header class="navbar" id="c-nav"> 
    <div class="container"> 
    <a id="logo" href="/">Logo</a> 
    <nav> 

     <div class="navbar-header"> 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <!--//nav-toggle--> 
     </div> 
     <!--//navbar-header--> 

     <div class='navbar-collapse collapse' id='navbar-collapse'> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a class="header-text" href="/">Home</a></li> 
      <li><a class="header-text" href="/section">Practice</a></li> 
      <li><a class="header-text" href="/login">Log in</a></li> 
     </ul> 
     </div> 
    </nav> 
    </div> 
</header> 
+0

你是否清楚地說明了需要......而且所有的東西都運行良好。 – vignesh

+0

它的工作,你有jQuery鏈接? – pbenard

+0

您必須按照其他用戶告訴您的方式鏈接jQuery,並且因爲在'nav'標記處缺少Bootstrap類,因此看不到漢堡包菜單:' – blonfu

回答

0

只需添加的jQuery這應該工作:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> 

小提琴:https://jsfiddle.net/ze5ju72n/

+0

哦,男孩......好吧。我實際上使用rails來開發這個,所以這很麻煩,因爲我不能只是像這樣添加jquery。奇怪,因爲我絕對包括jQuery在我的Rails應用程序。猜猜這是另一個標籤的問題。 –