Twitter Bootstrap: What is the correct way to use the `.btn` class in the navigation bar?

Question

I use the navigation bar for standard navigation material, and I would like to enable a button for login and registration.

I use the a tag with the btn btn-large btn-success classes, and by default it appears that navbar does not support the use of nested btn s.

The result looks something like this:

And when it freezes, it looks like:

My main question is: am I doing this wrong? Is something missing?

I think I will ask before overriding the CSS classes for .btn. within the navigation bar.

Thank.

Answer 1

The embankment holds buttons without problems - I have buttons on the navigation panel without problems, and I was able to add them to a static example in the navigation panel on the Boot Page :

html should be laid out as follows:

 <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 are not using responsive layout to minimize the navigation bar on smaller screens, just put your button one level up in the <div class="container"> .

If you still haven’t found a problem, try using Chrome Dev Tools to see CSS applied to buttons, t.

Answer 2

As discussed here , sharing a link using a div:

 <div><a class='btn' href='#'>Link</a></div> 

Answer 3

Here is a modified version of Jared Harley's answer. This is what I ultimately used, and it supports a drop down menu in the navigation bar.

 <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 class="pull-right"> <ul class="nav"> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <li> <a href="#">item</a> </li> <li class="divider"></li> <li> <a href="#">another item</a> </li> </ul> </li> <li class="divider-vertical"></li> </ul> <a class="btn btn-primary" href="#">Primary</a> <a class="btn btn-success" href="#">Success</a> </div> </div> </div> </div> 

Answer 4

 <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">Brand name</a> <ul class="nav"> <li class="active"><a href="#">Main</a></li> <li><a href="#about">Next one</a></li> </ul> <div class="btn-group pull-right"> <a class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> Trololo</a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> </div> 

Answer 5

I had the same problem when installing .btn in navbar, and when I hung it cut off half of the bg button, I solved it in such a way that I declared .nav> li> a.btn: hover over main again .css → a custom stylesheet file located in the head after bootstrap.css, this way it worked, because if you check an element in firebug or any of the dev tools and try to cast it, you will notice that the .btn hover style is overwritten with the style nav hover, which is placed after the buttons in the bootstrap.css file ...

Answer 6

I fixed this by adding this to:

 style="margin-top:10px;" 

The full button code is as follows:

 <a href="/register"><button class="btn btn-warning pull-right" style="margin-top:10px;">Register</button></a>