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/