2016-07-15 126 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应用程序。猜猜这是另一个标签的问题。 –