Меню Bootstrap по умолчанию не разваливается в мобильном режиме

Question

Я попытался реализовать вертикальную навигацию с twitter bootstrap 3.0, которая автоматически сбрасывается.

Работа с основами (размер окна small = меню вверху, как и должно быть), но проблема в том, что он не рухнул, как есть, если я использую функции navbar по умолчанию в bootstrap.

<div class="container-fluid"> 

     <div class="row"> 
      <div class="navbar-brand"> 
       <a href="<g:createLink uri="/" absolute="true" />">BABSI</a> 
      </div> 
      <button type="button" class="btn navbar-btn" data-toggle="collapse" 
        data-target="#sidebar">TOOGLE 

        Toggle navigation 
        <span class="icon-bar"></span> <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
     </div> 
     <div class="row"> 
      <header id="sidebar" class="col-md-2 collapse"> 

       <div class="row"> 

            <!-- generates ul structure --> 
        <nav:primary class="nav navbar-inverse nav-stacked" /> 
       </div> 
      </header> 
      <section id="content" class="col-md-10"> 
       <div class="row"></div> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <g:layoutTitle /> 
        </div> 
        <div class="panel-body"> 
         <g:layoutBody /> 
        </div> 
       </div> 
      </section> 
     </div> 
    </div> 

Answer 1

Вам нужен .navbar-collapse класс в вашем нав, так как это тот, который настроен, чтобы свернуть в данной точке останова.

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

<div class="container"> 
    <div class="navbar navbar-default"> 
     <div class="navbar-brand"> 
      <a href="#">BABSI</a> 
     </div> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar .navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="row"> 
     <header id="sidebar" class="col-md-2"> 
      <div class="collapse navbar-collapse"> 
       <!-- generates ul structure --> 
       <nav:primary class="nav navbar-inverse nav-stacked" /> 
      </div> 
     </header> 
     <section id="content" class="col-md-10"> 
      <div class="row"></div> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <g:layoutTitle /> 
       </div> 
       <div class="panel-body"> 
        <g:layoutBody /> 
       </div> 
      </div> 
     </section> 
    </div> 
</div> 

Чтобы удалить ненужные стили и так как вы не используете структура Navbar коллапса по умолчанию вам нужно добавить к вашей CSS

//remove background and border from navbar 
.navbar-default{ 
    background: none; 
    border: 0; 
} 
.navbar-collapse{ 
    padding: 0; 
} 

//override width:auto of navbar-collapse 
@media (min-width:768px) { 
    .navbar-collapse { 
     width: 100%; 
    } 
} 

Вот demo fiddle с изменениями

Answer 2

Попробуйте это.

<script> 
    $('.navbar-collapse a').click(function(){ 
     $(".navbar-collapse").collapse('hide'); 
    }); 
</script>