Bootstrap導航欄崩潰未在正確的位置打開

Question

當我點擊按鈕以在移動模式下展開導航時，它不會將內容向下推，只會在按鈕旁邊打開一個非常小的菜單，我完成了嗎？有問題？

<div class = "container"> 

     <a href = "#" class = "navbar-brand">Website Logo Goes Here</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=" bg-warning"><a href="#">Home</a></li> 
       <li class = "dropdown"> 
        <a href="#" class="dropdown-toggle bg-info" data-toggle="dropdown">Games <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Nintendo 3DS</a></li> 
         <li><a href="#">Nintendo DS</a></li> 
         <li><a href="#">Nintendo GBA</a></li> 
         <li><a href="#">Sony PSP</a></li> 
         <li><a href="#">Sony PS2</a></li> 
         <li><a href="#">View All</a></li> 
        </ul> 
       </li> 
       <li class="bg-warning"><a href="#">Games</a></li> 
       <li class="bg-info"><a href="#">Search</a></li> 
       <li class="bg-success"><a href="#">Help</a></li> 
       <li class="bg-danger"><a href="#">Blog</a></li> 
      </ul> 

     </div> 

    </div> 

Answer 1

你缺少一對夫婦需要的是包裝的div，你應該切換按鈕下移到你的標誌。它應該看起來像這樣：

<div class = "container"> 

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 

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

    <a href = "#" class = "navbar-brand">Website Logo Goes Here</a> 
    </div> 

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

      <ul class = "nav navbar-nav navbar-right"> 
       <li class=" bg-warning"><a href="#">Home</a></li> 
       <li class = "dropdown"> 
        <a href="#" class="dropdown-toggle bg-info" data-toggle="dropdown">Games <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Nintendo 3DS</a></li> 
         <li><a href="#">Nintendo DS</a></li> 
         <li><a href="#">Nintendo GBA</a></li> 
         <li><a href="#">Sony PSP</a></li> 
         <li><a href="#">Sony PS2</a></li> 
         <li><a href="#">View All</a></li> 
        </ul> 
       </li> 
       <li class="bg-warning"><a href="#">Games</a></li> 
       <li class="bg-info"><a href="#">Search</a></li> 
       <li class="bg-success"><a href="#">Help</a></li> 
       <li class="bg-danger"><a href="#">Blog</a></li> 
      </ul> 

     </div> 
    </nav> 
    </div>