Align button and text in navbar on twitter bootstrap

Question

I wrote the following html with Bootstrap 2.3.2 enabled and no other css:

<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> (...) <div class="nav-collapse collapse"> <ul class="nav"> (...) </ul> <form id="login-form" class="navbar-form pull-right"> <span class="navbar-text">Hello, username!</span> <button id="logout" class="btn">Log out</button> </form> </div> </div> </div> </div> 

How can I make the exit button .navbar with the text and .navbar correctly? The button is currently attached to the bottom of the line, which is the bottom of .navbar due to .navbar-text .

The problem can be viewed here .

Answer 1

You can reset to leave the button marker through CSS:

 .navbar .btn { margin-top: 0; }