Bootstrap 3: Input group in navbar form takes up entire width

Question

So this is what bootstrap\'s navbar form looks like.

The default HTML is:

Answer 1

Edit: I didn't notice OP asked for a solution without manually setting width in css. Still, I think this is a good alternative if you don't mind the max-width. And it only sets the max-width for the high resolutions, so you keep the normal behavior on tablet and mobile.

1) Add navbar-searchbox on div.input-group:

  

    
    

      Search
    
  

2) Put this in your .lass file.

@media (min-width: @screen-sm-min) {
  .navbar-searchbox {
    max-width: 250px;
  }
}

3) Jump around the room shouting victory!

No need use rows, and yes that is all the CSS you need. Just works, try it.