Bootstrap nav menu не рушится

Question

Не могу понять, почему мое навигационное меню не сворачивается при меньших разрешениях. Это отзывчиво, но я не получаю аккуратного раскрывающегося списка, все пункты меню навигации отображаются только.

Как я могу заставить его рухнуть? Вот мой Navbar код

<!-- Nav Bar --> 
     <nav class="navbar navbar-inverse"> 
     <a href="index.html" class="pull-left visible-md visible-lg "><img src="http://pcduck.com/pirates/images/logo.jpg" class="img-responsive" alt="BlackHeart Pirates Guild Vault"/></a> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="http://pcduck.com/pirates/index.php" >Home</a></li> 
     <li ><a href="http://www.blackheartpirates.com/forums/" >Forums</a></li> 
     <li ><a href="#">Raids</a></li> 
     <li ><a href="#">Apply</a></li> 
     <li ><a href="http://pcduck.com/pirates/index.php/about">About</a></li> 
     <li ><a href="#">Contact</a></li> 
     </ul> 
     </nav> 
     <!--End Nav Bar --> 

http://pcduck.com/pirates/index.php

Answer 1

У вас не хватает какой-то важный код, который отображает «меню гамбургер» на небольших экранах и коллапсирует ваши навигационные ссылки. Вот что ваш код Navbar должен выглядеть, чтобы достичь того, чего вы хотите:

<!-- Nav Bar --> 
     <nav class="navbar navbar-inverse"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="http://pcduck.com/pirates/index.php" >Home</a></li> 
     <li ><a href="http://www.blackheartpirates.com/forums/" >Forums</a></li> 
     <li ><a href="#">Raids</a></li> 
     <li ><a href="#">Apply</a></li> 
     <li ><a href="http://pcduck.com/pirates/index.php/about">About</a></li> 
     <li ><a href="#">Contact</a></li> 
     </ul> 
      </div> 
     </nav> 
     <!--End Nav Bar --> 

Я оставил свой логотип изображение, потому что это будет до вас, чтобы решить, где это место на экране.