title: Twitter Boostrap responsive navbar issue with search form when collapsed
body: <p>I am using the bootstrap responsive navbar to collapse links in the navbar when the screen is smaller. I want to keep a button and a search box out of the collapsed area though. This is my code:</p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="navbar-inner"&gt;
              &lt;div class="container-fluid"&gt;                    
                  &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
                      &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;/a&gt;
  
                 &lt;a class="brand" href="/"&gt;site name&lt;/a&gt;
  
                  &lt;div class="nav-collapse"&gt;
                      &lt;ul class="nav"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Other&lt;/a&gt;&lt;/li&gt;    
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
                  &lt;form action="#" class="navbar-search pull-left"&gt;
                      &lt;input name="search" class = "search-query" /&gt;
                  &lt;/form&gt;
  
                  &lt;div class="btn-group pull-right"&gt;
                      &lt;button class="btn btn-primary"&gt;Log In&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;      
      &lt;/div&gt;
  </code></pre>
  
  <p>This looks fine when on a normal screen but once the links collapse, the button and search box are forced below, doubling the height of the nav.</p>
  
  <p>If I move the search box to the left of the nav-collapse links, it works ok but I need the links to show up first.</p>
  
  <p>Any ideas how to achieve this?</p>