Bootstrap响应式导航栏链接对齐和样式问题

Question

当浏览器折叠时，我遇到了Bootstrap导航栏的问题。一切工作正常，内容响应和按钮出现，但按下按钮时，链接不会在导航栏品牌下面下降，而是在导航品牌旁边的中间对齐。它也似乎没有选择任何东西，或正确的样式，即字体大小没有减少。任何想法这是什么？我知道这很简单，但我不能看到它！

谢谢。 （以下机身码）

<nav class = "navbar navbar-inverse navbar-fixed-top"> 


    <div class = "container"> 

     <div class = "nav-header"> 
      <a href = "#" class = "navbar-brand">Site Title</a> 

      <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#navHeaderCollapse"> 

       <span class = "icon-bar"></span> 
       <span class = "icon-bar"></span> 
       <span class = "icon-bar"></span> 

      </button> 

     </div> 

     <div class = "collapse navbar-collapse" id="navHeaderCollapse"> 

      <ul class = "nav navbar-nav navbar-right"> 

       <li class = "active"><a href = "#">Home</a></li> 
       <li class = "active"><a href = "#">About</a></li> 

       <li class = "dropdown active"> 

       <a class = "#" class = "dropdown-toggle" data-toggle = "dropdown">Media</a> 

       <ul class = "dropdown-menu"> 
        <li><a href = "#">SubOne</a></li> 
        <li><a href = "#">SubTwo</a></li> 
        <li><a href = "#">SubThree</a></li> 
        <li><a href = "#">SubFour</a></li> 
       </ul> 
       </li> 

       <li class = "active"><a href = "#">Contact</a></li> 

       </ul> 

      </div> 

    </div> 

    </nav> 

Answer 1

问题是错误的类名：

<div class = "nav-header"> 

change to 

<div class = "navbar-header"> 

http://jsfiddle.net/8pLven4s/