title: Make an element stretch full width in Bootstrap navbar
body: <p>This is the schematic of the navbar for a web application I am developing:</p>
  
  <p>[ Brand [button] [button] [----- input field -----] ----- empty space ----- [button] ]</p>
  
  <p>My code (simplified) looks like this:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="navbar navbar-static-top no-print"&gt;
      &lt;div class="navbar-inner"&gt;
        &lt;a class="brand" href="#"&gt;Brand&lt;/a&gt;
        &lt;ul class="nav"&gt;
          &lt;li&gt;&lt;a href="#"&gt;
            &lt;i class="icon-large icon-group"&gt;&lt;/i&gt;
          &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;
            &lt;i class="icon-large icon-list"&gt;&lt;/i&gt;
          &lt;/a&gt;&lt;/li&gt;
          &lt;li id="search"&gt;
            &lt;form class="navbar-search"&gt;
              &lt;input type="text" class="input-xxlarge" placeholder="Search"&gt;
            &lt;/form&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;
            &lt;i class="icon-large icon-plus"&gt;&lt;/i&gt;
          &lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul class="nav pull-right"&gt;    
          &lt;li&gt;&lt;a href="#"&gt;
            &lt;i class="icon-large icon-lemon"&gt;&lt;/i&gt;
          &lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the input field to cover up the empty space and reach all the way to the button on the right side of my navbar. How can I achieve this?</p>