Bootstrap-default navbar ist nicht zusammengebrochen in der mobilen Ansicht

So, ich bin neu auf bootstrap und kann nicht scheinen, um eine Lösung zu finden, zu beheben mein problem ist, wenn die mobile Ansicht das Menü geöffnet ist, wenn ich will, dass es standardmäßig eingeklappt.

<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>

Beispiel screenshot

InformationsquelleAutor Nicola Sansom | 2016-01-12