11

I am trying to use a bootstrap navbar with things left-aligned and right-aligned.

Here's the code I have for the part on the right:

<ul class="nav navbar-nav navbar-right">      
  <p class="navbar-text">Logged in as Some Person</p>
  <li>
    <a href="/log_out">Log out</a>
  </li>
</ul>

This is within .navbar > .navbar-collapse. This works for the most part, except that the padding on the right isn't respected.

I have tested on chrome and firefox, and in both cases, the inspector's box model shows 15px of padding on the right, but when the page actually renders, there is no space between the content of the box and the scrollbar on the right of the page.

Here's a jsfiddle demonstrating the problem: http://jsfiddle.net/YQKZ3/.

EDIT: It appears that the problem only occurs when the nav element has the class navbar-fixed-top. What causes the inclusion of that class (which is needed) to screw up the padding on right-aligned things?

cg505
  • 192
  • 1
  • 2
  • 10
  • With a little more research, I can see that the jsfiddle works without the `navbar-fixed-top` class on the nav element. Will update the question accordingly. – cg505 Dec 26 '13 at 22:30

1 Answers1

14

http://jsfiddle.net/jmJWr/

Needs a .container just inside the .navbar then adjust the css.

.navbar > .container {width:auto;}

In a few days or so 3.1.0 will come out, then you can use .container-fluid and remove that css.

The documentation is wrong, here is the thread in the repo: https://github.com/twbs/bootstrap/issues/11783

Community
  • 1
  • 1
Christina
  • 34,296
  • 17
  • 83
  • 119
  • Why is this necessary? – cg505 Dec 26 '13 at 22:16
  • It's necessary because it adds the 15px padding so the items don't hit the edges, this is part of all the implementations of the navbar, there's always a .container inside them. – Christina Dec 26 '13 at 22:18
  • I was basing my code off of the navbar example at http://getbootstrap.com/components/#navbar, which doesn't seem to have a .container anywhere. – cg505 Dec 26 '13 at 22:34
  • 1
    Yep. There's an update to that, their docs are wrong on this. They are using the navbar inside a container in the docs but in all implementations of a navbar used as a navbar above the main content, there's a .container inside the navbar and soon you can use .container-fluid, the docs should be updated soon. – Christina Dec 26 '13 at 22:44
  • Here's where they confirm that the documentation is wrong: https://github.com/twbs/bootstrap/issues/11783 – Christina Dec 26 '13 at 22:48