Bootstrap 3.0 Button in Navbar

Question

I upgraded bootstrap 3.0 now. And \"a\" tag which looks like btn (by the help of class .btn) is ruined on navbar.

Answer 1

Wrap a <p class="navbar-btn"> around the <a class="btn">:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <p class="navbar-btn">
                    <a href="#" class="btn btn-default">I'm a link button!</a>
                </p>
            </li>
        </ul>
    </div>
</nav>

JSFiddle: http://jsfiddle.net/lachlan/398kj/

Screenshot:

Answer 2

The problem is that the selector for styling an anchor in a navbar is: .nav > li > a which means it has a higher precedence than a .navbar-btn.

You can fix by just wrapping it in another tag like a span. I don't think you should use a form tag as others suggest as it's not a form at all.

Answer 3

http://learnangular2.com/events/

EVENT OBJECT

To capture the event object, pass $event as a parameter in the event callback from the template:

<button (click)="clicked($event)"></button>

This is an easy way to modify the event, such as calling preventDefault:

@Component(...)
class MyComponent {
  clicked(event) {
    event.preventDefault();
  }
}

Answer 4

Now, bootstrap 3 has buttons in the navbar like this:

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

It uses navbar-btn so it knows it's in the navbar.

If you want it to work, do this:

<li>
    <form action="#">
        <button class="btn btn-default navbar-btn">Link</button>
    </form>
</li>

This way, it still acts like an anchor tag. Just change # for the value you actually want it to go to.

So for this instance:

<li>
    <form action="<?php echo BASE_PATH; ?>register.php">
        <button class="btn btn-default navbar-btn">Link</button>
    </form>
</li>

Answer 5

With bootstrap 3, it is still possible to have a <a>link rendered as a button, but you have to include them into a <form>. Also, the <a> should include the navbar-btn class.

<li>
  <form>
    <a href="#" class="btn btn-primary btn-sm navbar-btn">
      register
    </a>
  </form>
</li>