title: How to make bootstrap3's navbar's input size to fill with the rest of the space?
body: <p>I want to use the input group in navbar-form, like following code:</p>
  
  <pre><code>&lt;form class="navbar-form navbar-left" role="search"&gt;
      &lt;div class="input-group"&gt;
          &lt;input class="form-control" placeholder="product" type="text"&gt;
          &lt;span class="input-group-btn"&gt;
              &lt;button class="btn btn-default" type="button"&gt;Search&lt;/button&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>It got fixed size about 200px in firefox. However, in chrome or safari, the search takes a whole new line. I want to know does bootstrap's css control the input's width.</p>
  
  <p>input-group-btn got two css setting, display: table-cell; width: 1%. What are these for?</p>
  
  <p>In the docs, the default search bar is:</p>
  
  <pre><code>&lt;form class="navbar-form navbar-left" role="search"&gt;
    &lt;div class="form-group"&gt;
      &lt;input type="text" class="form-control" placeholder="Search"&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>It works both fine in firefox or chrome, but I want it to take the rest of the navbar's space. Like facebook's search bar.</p>
  
  <p>I am a individual developer, I am not good at front end design, Does anyone know anything about this particular request?</p>