Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap 3 navbar-right no padding with navbar-fixed-top

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?

like image 634
cg505 Avatar asked Dec 26 '13 19:12

cg505


1 Answers

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

like image 76
Christina Avatar answered Oct 02 '22 17:10

Christina