Bootstrap 默认导航栏在移动视图中不折叠

Question

所以我是 bootstrap 新手，似乎找不到解决我的问题的解决方案，即当我希望默认折叠菜单时，移动视图打开时。

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
   <div class="navbar-header">
       <button type="button" class="navbar-toggle" 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>

      </div>
      <div class="navbar-collapse collpase">
      <ul class="nav navbar-nav navbar-left">
          <li><a href="#">Home</a></li>
          <li><a href="#">News & Events</a></li>
          <li class="dropdown">
          <a href="#" class ="dropdown-toggle" data-toggle="dropdown">Things to do<b class="caret"></b></a>
        <ul class="dropdown-menu">
              <li><a href="#">Leisure</a></li>
              <li><a href="#">Groups & Activities </a></li>
              <li></li>    
              </ul>      

          </li>
           <li class="dropdown">
          <a href="#" class ="dropdown-toggle" data-toggle="dropdown">Services<b class="caret"></b></a>
        <ul class="dropdown-menu">
              <li><a href="#">Education & Learning</a></li>
              <li><a href="#">Personal Care</a></li>
              <li><a href="#">Police</a></li>
              <li></li>    
              </ul>      

          </li>
          <li><a href="#">Businesses</a></li>
          <li><a href="#">History</a></li>
          <li><a href="#">Discussion Forum</a></li>



          </ul>

      </div>
   </div>
  </div>

Example screenshot

Answer 1

代码中的错别字

<div class="navbar-collapse collpase">

检查拼写是否折叠

Answer 2

你在下拉列表的包装<div> 中有错误的类，应该如下（你的有一个错字 - “collpase”）：

<div class="collapse navbar-collapse">

https://jsfiddle.net/2y9edmk1/

Answer 3

这是一个 JQuery 问题。检查 JQuery 是否正确包含。