Bootstrap navbar justify / span menu items occupying full width

html, navbar, twitter-bootstrap

Solution

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;
}

Problem

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.

Original source