Justified 100% width navbar in Bootstrap 3

Question

I would like my navbar's list items to span the entire width of the page, but to be justified. I tried the second answer in this question by Morgen32: How to justify navbar-nav in Bootstrap 3

    @media (min-width: 768px){
    .navbar-nav {margin: 0 auto; display: table; table-layout: fixed; float:none; width:100%;}
    .navbar-nav > li {display:table-cell; float:none; text-align:center;}
}

However the longer items go to two lines and it's not using the full width of the page either.

http://jsfiddle.net/xt7Laawd/2/

Thanks in advance for your help!

Edit: I edited the fiddle. It wasn't the correct one.

I just realized I copied the wrong jsfiddle link. Updated it in the OP. The problem with the fiddle @humble.rumble quoted is that it's not stretching to the max of the navbar. I want the first item on the left edge, the last item on the right edge, with the rest centered and justified. — Rachel S, Jun 01 '15 at 19:17

score -1 · Accepted Answer · answered Jun 01 '15 at 19:22

Ok I got it. Turns out I had to change table-layout to auto instead of fixed.

@media (min-width: 768px){
    .navbar-nav {margin: 0 auto; display: table; table-layout: auto; float:none; width:100%;}
    .navbar-nav > li {display:table-cell; float:none; text-align:center;}
}

Justified 100% width navbar in Bootstrap 3

1 Answers1