Bootstrap 3 Navbar не рушится на мобильном устройстве

Question

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

Пример здесь: http://www.careerchoices.peaktopeak.org/CareerChoices/home.php

<div class="navbar navbar-inverse 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> 
     <a class="navbar-brand" href="CareerChoices.php">Career Choices</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="about.php">About</a></li> 
     <li><a href="ContactInfo.php">Contact</a></li> 
     <li class = "logout"><a href = "logout.php">Log Out </a> </li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div> 

Я был в состоянии иметь мобильный сворачивающихся Navbar на отдельной странице http://www.careerchoices.peaktopeak.org/CareerChoices/CareerChoices.php, но даже с почти идентичным коду эта строка не будет разрушаться.

Я googled вокруг, но я только начинаю с бутстрапа - большая часть моей работы была почти скопирована с шаблонов Bootstrap. Любые идеи?

Answer 1

вы должны использовать

<meta name="viewport" content="width=device-width, initial-scale=1"> 

что мета сказать браузер, чтобы установить ширину ширины страницы равной устройства

вы можете увидеть это на веб-сайте boostrap:

http://getbootstrap.com/css/#overview-mobile