navbar-collapse不會在圖標下摺疊

Question

我試圖修復下拉菜單項放在圖標旁邊而不是圖標下方的部分。

<div class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 
     <a href="#" class="navbar-brand" >D'Cartoon</a> 
     <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 class="collapse navbar-collapse navHeaderCollapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="#">Home</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Twitter</a> </li> 
         <li><a href="#">Facebook</a> </li> 
         <li><a href="#">Google+</a> </li> 
         <li><a href="#">Pinterest</a> </li> 
        </ul> 
       </li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact-us">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

試一試 - http://jsfiddle.net/arty_/9hauc1sj/

<nav class="navbar navbar-inverse navbar-static-top"> 
     <div class="container"> 

      <a href="#" class="navbar-brand" >D'Cartoon</a> 

      <div class="navbar-header"> 
       <div class="col-sm-12"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 
      </div> 

      <div id="main-nav" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="active"><a href="#">Home</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Twitter</a> </li> 
          <li><a href="#">Facebook</a> </li> 
          <li><a href="#">Google+</a> </li> 
          <li><a href="#">Pinterest</a> </li> 
         </ul> 
        </li> 
        <li><a href="#about">About</a></li> 
        <li><a href="#contact-us">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav>