全寬和對齊的導航欄

Question

我是新手在CSS和javasript， 我使用默認的twitter靴帶導航欄下拉，我想我的導航欄內容佔據導航欄的整個空間的全部寬度， 我使用的示例在http://twitter.github.com/bootstrap/examples/justified-nav.html 但不工作

這裏是我的html代碼

<div class="row-fluid"> 
    <div class="span12"> 
     <div class="navbar"> 
      <div class="navbar-inner"> 
       <div class="container"> 
        <ul class="nav"> 
         <li><a href="#">About</a></li> 
         <li class="divider-vertical"></li> 
         <li class="span3"><a href="#">Portfolio</a></li> 
         <li class="divider-vertical"></li> 
         <li><a href="#">Contact</a></li> 
         <li class="divider-vertical"></li> 
        </ul> 
        <ul class="nav"> 
         <li class="dropdown"> 
          <a href="#" 
           class="dropdown-toggle" 
           data-toggle="dropdown"> 
           Services 
           <b class="caret"></b> 
          </a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Web Design</a></li> 
           <li><a href="#">Web development</a></li> 
           <li><a href="#">Wordpress Theme development</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

請幫助

Answer 1

DEMO

修改CSS：

body { 
    padding-top: 20px; 
    padding-bottom: 60px; 
    } 

    /* Custom container */ 
    .container { 
    margin: 0 auto; 
    max-width: 1000px; 
    } 
    .container > hr { 
    margin: 60px 0; 
    } 

    /* Main marketing message and sign up button */ 
    .jumbotron { 
    margin: 80px 0; 
    text-align: center; 
    } 
    .jumbotron h1 { 
    font-size: 100px; 
    line-height: 1; 
    } 
    .jumbotron .lead { 
    font-size: 24px; 
    line-height: 1.25; 
    } 
    .jumbotron .btn { 
    font-size: 21px; 
    padding: 14px 24px; 
    } 

    /* Supporting marketing content */ 
    .marketing { 
    margin: 60px 0; 
    } 
    .marketing p + h4 { 
    margin-top: 28px; 
    } 


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