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?
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With