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

Answer 2

The official example works perfectly until you want to use those menu items with the native drop down calls. The drop down becomes the width of all of your drop down items combined.

*note the ">", it will make the style stop from bleeding over into the .dropdown-menu subset.

/* 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;     text-align: center; }   .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; }