Twitter Bootstrap: What is the correct way to use the `.btn` class within a navbar?

Question

I'm using a navbar for the standard nav stuff and i'd like to include a button for Sign in and Sign up.

The I'm using an a tag with the btn btn-large btn-success classes and by default it appears the navbar does not accommodate the use of nested btns.

The result is something like this:

And when hovered over, it comes out as:

My question is basically: Am i doing this wrong? Is there something I'm missing?

Thought i'd ask before I redefine CSS classes for .btn. within a navbar.

Thanks.

Answer 1

The navbar accommodates buttons without a problem - I have buttons in the navbar without any problems, and I was able to add them to the static navbar example on the Bootstrap page:

The html should be laid out like this:

<div class="navbar navbar-fixed-top active">   <div class="navbar-inner">     <div class="container" style="width: auto;">       <a class="brand" href="#">Project name</a>       <div class="nav-collapse">         <ul class="nav">           ... nav links ...         </ul>         <form class="navbar-search pull-left" action="">           ... search box stuff         </form>         <a class="btn btn-success">Sign in</a>         <a class="btn btn-primary">Sign up</a>       </div>     </div>   </div> </div> 

If you're not using the responsive layout to collapse the navbar on smaller screens, just put your button links one level up, in <div class="container">.

If you're still not finding the problem, try using Chrome's Dev Tools to see what CSS is being applied to the buttons that shouldn't be.