Twitter Bootstrap导航栏未按预期显示

我正在使用Twitter Bootstrap并定义了一个导航栏

<div class="navbar navbar-fixed-top">  
    <div class="navbar-inner">  
        <div class="container">  
            <ul class="nav">  
                <li class="active">  
                     <a class="brand" href="#">w3resource</a>  
                </li>  
               <li>
                   <a href="#">About</a>
               </li>  
              <li>
                 <a href="#">Portfolio</a>
              </li>  
              <li>
                  <a href="#">Contact</a>
              </li>  
          </ul> 
       </div>  
   </div>  
</div> 

我包括了bootstrap css文件，jquery和bootstrap js文件。导航栏显示如下图所示。

这很奇怪，因为使用引导程序页面上的其他元素似乎样式还不错，请看下面的图片

任何想法为什么会发生这种情况？