javascript - 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/