title: Bootstrap 3 - How to maximize input width inside navbar
body: <p>Right now I have a navigation bar that looks like:
  <a href="http://bootply.com/78239">http://bootply.com/78239</a></p>
  
  <p>I want to maximize the width of the "search" text-input, without creating line-breaks (i.e., that the "Clear" link will be tight with the "About" link).</p>
  
  <p>I only have basic experience with css and web-design. I read something about "<code>overflow: hidden</code>" tricks, but I don't understand how to use it when there are more elements to the right of the targeted element.</p>
  
  <p>Thanks</p>
  
  <hr>
  
  <p>EDIT:</p>
  
  <p>A partial solution can be to set the width "manually" for each case, like in <a href="http://bootply.com/78247">http://bootply.com/78247</a> :</p>
  
  <pre><code>@media (max-width: 767px) {
    #searchbar &gt; .navbar-form {
      width: 100%;
    }
  }
  
  @media (min-width: 768px) and (max-width: 991px) {
    #searchbar &gt; .navbar-form {
      width: 205px;
    }
  }
  
  @media (min-width: 992px) and (max-width: 1199px) {
    #searchbar &gt; .navbar-form {
      width: 425px;
    }
  }
  
  @media (min-width: 1200px) {
    #searchbar &gt; .navbar-form {
      width: 625px;
    }
  }
  </code></pre>
  
  <p>but this solution will not work when the menu's texts are "dynamic" (for example, contain "Hello username").</p>
  
  <p>I suppose it is not a big issue if you assume that there is a limit on the menu's texts' widths - it's just annoying to calculate/test those widths manually.
  I'm just curious to know if there's a neat way to do it automatically.</p>