2014-09-24 9 views
1

Я начинаю с Bootstrap и его navbars.Bootstrap navbar не рушится

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

Fiddle

HTML:

 <!-- Static navbar --> 
      <div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" 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="#">Project name</a> 
       </div> 
       <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="../navbar/">Default</a></li> 
        <li class="active"><a href="./">Static top</a></li> 
        <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
       </ul> 
       </div><!--/.nav-collapse --> 
      </div> 
+1

Ваш код работает отлично http://www.bootply.com/KPa5Y4MFal –

ответ

2

певце отсутствует класс коллапс на навигационной панели

Этот список:

  <ul class="nav navbar-nav navbar-right"> 
       <li><a href="../navbar/">Default</a></li> 
       <li class="active"><a href="./">Static top</a></li> 
       <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
      </ul> 

потребности быть завернуты в:

 <div class="navbar-collapse collapse"> 

Кроме того, скрипт, который вы указали, содержит неправильные JS и CSS. Взгляните на этот пример здесь: http://jsfiddle.net/rbd8758f/

+0

даже после того, как упаковка, что код в этой линии его все та же. проверьте http://jsfiddle.net/b2bv9noe/2/ – Imran

+0

Я изучаю это, что-то еще испортилось, я обнаружил, что копирование примеров из http://bootsnipp.com/ помогло тонну, а затем зайти и изменить бит по-бит, что вам нужно – dbrin

+0

Его странно, потому что я просто скопировал и вставил этот HTML-код с одной из страниц примера начальной загрузки. – Imran

2

Вы положили метатег в свой заголовок, это сработало для меня.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">. 
Смежные вопросы