html - Bootstrap navbar justify / span menu items occupying full width

Question

I use the default Twitter Bootstrap responsive navbar (without the logo and search), but I want the menu items to be spanned, occupying the full width of the menu bar.

Here is what I have now default Bootstrap navbar (see --- as spaces):

[home | menu item 1 | menu item 2 | menu item 3 | contact------------------------]

and the result I like to have (menu items occupying the full width):

[--home-- | ---menu item 1--- | ---menu item 2--- | ---menu item 3--- | -contact-]

I hope someone can help.

Answer 1

Have a look at Bootstrap's official example:

/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
    padding: 0;
}

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}

.navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
}

.navbar .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .75);
    border-right: 1px solid rgba(0, 0, 0, .1);
}

.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}