Putting form controls in a navbar

Question

Playing with Bootstrap 2.0, I could not put form controls in a navbar nicely. The obvious guess puts the search box too high.

How can I fix my fiddle?

Answer 1

if you place this in the .nav .container:

<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Search">
</form>

You get a pretty search box: http://jsfiddle.net/p4eAN/1/

If you want to align the search bar on the right side change the 'pull-left' class to 'pull-right'

-update- Combine the with the input tags and add a tiny bit of css: http://jsfiddle.net/7J7cz/56/

.navbar-search .input-prepend {
  margin-bottom: 0;
}

-update2- Added a float:right to the input, this fixes Chrome, Firefox was already working and still works: http://jsfiddle.net/7J7cz/57/