導航欄摺疊菜單不適用於移動設備和桌子視口

Question

我有和較小的viewport上的bootstrap3 navbar-menu問題。當我在巡視器中進入響應模式並點擊一個hamburger圖標時，我看不到任何交互，調試工具沒有顯示任何錯誤，並且我擁有所有標準bootstrap3 navbarcollapse類代碼以支持較小的viewport，我只是俯瞰一些東西。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <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="{% url 'index' %}"><img src="static/img/SNYClogo.png" height=50 width=110></a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul id="navbar" class="nav navbar-nav navbar-right"> 
      <li><a href="{% url 'index' %}">Home</a></li> 
      <li><a href="#">Apartments</a></li> 
      <li><a href="#">About</a></li> 
     {% if user.is_authenticated %} 
      <li><a id="logout" href="/accounts/logout">Logout</a></li> 
     {% else %} 
      <li class="pull-right" id="showlogin"><a href="#"><button type="button" class="btn btn-sm btn-info round">GET STARTED</button></a></li> 
     {% endif %} 
      </ul> 
    </div><!--/.navbar-collapse --> 
    </div> 
</nav> 

有人可以檢查這個JSFIDDLE，並檢查我的代碼。

Answer 1

給.navbar編號給父母div不是ul。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <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="#"><img src="..." height=50 width=110></a> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li><a href="{% url 'index' %}">Home</a></li> 
 
       <li><a href="#">Apartments</a></li> 
 
       <li><a href="#">About</a></li> 
 
      {% if user.is_authenticated %} 
 
       <li><a id="logout" href="/accounts/logout">Logout</a></li> 
 
      {% else %} 
 
       <li class="pull-right" id="showlogin"><a href="#"><button type="button" class="btn btn-sm btn-info round">GET STARTED</button></a></li> 
 
      {% endif %} 
 
       </ul> 
 
     </div><!--/.navbar-collapse --> 
 
     </div> 
 
    </nav>

Fiddle