How to stretch elements of a Bootstrap navigation bar to make use of the entire width?

Question

Consider the following Bootstrap navigation bar:

Some facts abou

Answer 1

You could use CSS Table display layout to distribute your nav items. Its well supported across browsers and simple to implement:

.navbar-nav {
    display:table;
    width:100%;
    margin: 0;
}
.navbar-nav > li {
    float:none;
    display:table-cell;
    text-align:center;
}

This makes it 100% the width of its parent #header, which in turn is restricted by the width of #page, so if you need it to span 100% of the whole document width you'll need to move it out of #page or make #page wider.

http://jsfiddle.net/zBM6D/5/

Answer 2

Based on @Moob's answer, I created a gist which should do that nicely:

https://gist.github.com/lukaszbachman/48774b74b6c4e9d0f4cb#file-navigation-stretch-css