title: Bootstrap menu is not collapsed by default in mobile view
body: <p>I tried to implement a vertical navigation with twitter bootstrap 3.0 that collapses automatically.</p>
  
  <p>The basics work (window size small = menu at the top like it should be), but the problem is that it is not collapsed as it is if I use the default navbar features in bootstrap.</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="navbar-brand"&gt;
                  &lt;a href="&lt;g:createLink uri="/" absolute="true" /&gt;"&gt;BABSI&lt;/a&gt;
              &lt;/div&gt;
              &lt;button type="button" class="btn navbar-btn" data-toggle="collapse"
                      data-target="#sidebar"&gt;TOOGLE
  
                      Toggle navigation
                      &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; 
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;header id="sidebar" class="col-md-2 collapse"&gt;
  
                  &lt;div class="row"&gt;
  
                                      &lt;!-- generates ul structure --&gt;
                      &lt;nav:primary class="nav navbar-inverse nav-stacked" /&gt;
                  &lt;/div&gt;
              &lt;/header&gt;
              &lt;section id="content" class="col-md-10"&gt;
                  &lt;div class="row"&gt;&lt;/div&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-heading"&gt;
                          &lt;g:layoutTitle /&gt;
                      &lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;g:layoutBody /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>