导航栏折叠菜单不适用于移动设备和桌子视口

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