2015-04-23 2 views
0

Я работаю над проектом Meteor, и моя панель навигации должна иметь сворачивающиеся функции, которые предоставляет Bootstrap. Ниже моя навигация код:Bootstrap collapse mobile navbar не работает

<!-- Navigation, via bootstrap --> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <section class="container-fluid"> 

     <section class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1"> 
       <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="{{ pathFor 'home' }}"><i class="fa fa-usd"></i>&nbsp;&nbsp;AccountedFor</a> 
     </section> 

     <!-- collapse? --> 
     <section class="collapse navbar-collapse" id="collapse-1"> 
      <ul class="nav navbar-nav"> 
       {{#if currentUser}} 
        <p class="navbar-text">|</p> 
        <li><a href="{{pathFor 'categories'}}">Manage Categories</a></li> 
       {{/if}} 
       <p class="navbar-text">|</p> 
       <li><a href="{{pathFor 'about'}}">About</a></li> 
      </ul> 
      <section class="navbar-right"> 
       <p class="navbar-text"> 
        {{> loginButtons align="right"}} 
       </p> 
      </section> 

     </section> <!-- end collapse --> 
    </section> 
</nav> 

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

Incorrect Navbar

Это то, что бар выглядит, когда она имеет достаточную ширину, чтобы не требовать коллапса, со всеми записями видимыми:

Full Navbar

Он не имеет никаких проблем с указанием кнопки применимое тумблер когда размер окна подходит, но свернутая функциональность, которую я ожидаю, не происходит. Кто-нибудь может предложить некоторые советы? Спасибо заранее:

http://jsfiddle.net/bfo38kb1/ < - Эта скрипка иллюстрирует проблему, которую я испытываю.

+0

ум положить его в скрипку или что-то? – ajmajmajma

+0

Я могу попробовать это на мгновение. Мне, вероятно, придется изменить его, чтобы работать на скрипке, поскольку это часть приложения Meteor, и некоторые из них не будут работать без приложения. – MisutoWolf

+0

Понятно, но трудно сказать, что может вызвать вашу проблему, не видя немного больше. – ajmajmajma

ответ

1

Файл bootstrap.js отсутствует в вашей скрипке.
Включая его, он работает.

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

увидеть это http://jsfiddle.net/bfo38kb1/1

Смежные вопросы