Bootstrap Navbar沒有完全響應，原始導航欄仍然顯示

Question

當我在手機上查看我的導航欄時，切換按鈕等正在顯示並正在工作，但我必須首先單擊按鈕，響應式）導航欄消失。因此，我的完整無響應網站上的導航欄仍然只顯示響應式導航欄應顯示的內容。奇怪的是，當我點擊切換按鈕，無響應的導航欄消失，一切工作正常。

<header class="main_menu_sec navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-3 col-md-3 col-sm-12"> 
       <div class="lft_hd"> 
        <a href="index.html"><img src="img/logo.PNG" alt=""/></a> 
       </div> 
      </div>   
      <div class="col-lg-9 col-md-9 col-sm-12"> 
       <div class="rgt_hd">      
        <div class="main_menu"> 
         <nav id="nav_menu"> 
          <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          </button> 
         <div id="navbar"> 
          <ul> 
           <li><a class="page-scroll" href="index.html">Home</a></li> 
           <li><a class="page-scroll" href="#abt_sec">About Us</a></li>               
           <li><a class="page-scroll" href="#skill_sec">Skills</a></li> 
           <li><a class="page-scroll" href="#pr_sec">Services</a></li> 
           <li><a class="page-scroll" href="#protfolio_sec">Portfolio</a></li> 
           <li><a class="page-scroll" href="projects.html">Projects</a></li> 
           <li><a class="page-scroll" href="#ctn_sec">Contact Us</a></li> 
           <li><a class="page-scroll" href="#tm_sec">Team</a></li> 
          </ul> 
         </div>  
         </nav>   
        </div>     

       </div> 
      </div> 
     </div> 
    </div> 
</header> 

Answer 1

您需要將collapse navbar-collapse添加到要在手機上摺疊的位置。

工作片段：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<header class="main_menu_sec navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-lg-3 col-md-3 col-sm-12"> 
 
       <div class="lft_hd"> 
 
        <a href="index.html"><img src="img/logo.PNG" alt="LOGO HERE"/></a> 
 
       </div> 
 
      </div>   
 
      <div class="col-lg-9 col-md-9 col-sm-12"> 
 
       <div class="rgt_hd">      
 
        <div class="main_menu"> 
 
         <nav id="nav_menu"> 
 
          <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle" type="button"> 
 
          <span class="icon-bar"></span> 
 
          <span class="icon-bar"></span> 
 
          <span class="icon-bar"></span> 
 
          </button> 
 
         <div id="navbar" class="collapse navbar-collapse"> 
 
          <ul> 
 
           <li><a class="page-scroll" href="index.html">Home</a></li> 
 
           <li><a class="page-scroll" href="#abt_sec">About Us</a></li>               
 
           <li><a class="page-scroll" href="#skill_sec">Skills</a></li> 
 
           <li><a class="page-scroll" href="#pr_sec">Services</a></li> 
 
           <li><a class="page-scroll" href="#protfolio_sec">Portfolio</a></li> 
 
           <li><a class="page-scroll" href="projects.html">Projects</a></li> 
 
           <li><a class="page-scroll" href="#ctn_sec">Contact Us</a></li> 
 
           <li><a class="page-scroll" href="#tm_sec">Team</a></li> 
 
          </ul> 
 
         </div>  
 
         </nav>   
 
        </div>     
 

 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</header> 
 
<div>

Answer 2

您需要坍塌類導航欄ID

<header class="main_menu_sec navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-lg-3 col-md-3 col-sm-12"> 
      <div class="lft_hd"> 
       <a href="index.html"><img src="img/logo.PNG" alt=""/></a> 
      </div> 
     </div>   
     <div class="col-lg-9 col-md-9 col-sm-12"> 
      <div class="rgt_hd">      
       <div class="main_menu"> 
        <nav id="nav_menu"> 
         <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         </button> 
        <div id="navbar" class="collapse"> 
         <ul> 
          <li><a class="page-scroll" href="index.html">Home</a></li> 
          <li><a class="page-scroll" href="#abt_sec">About Us</a></li>               
          <li><a class="page-scroll" href="#skill_sec">Skills</a></li> 
          <li><a class="page-scroll" href="#pr_sec">Services</a></li> 
          <li><a class="page-scroll" href="#protfolio_sec">Portfolio</a></li> 
          <li><a class="page-scroll" href="projects.html">Projects</a></li> 
          <li><a class="page-scroll" href="#ctn_sec">Contact Us</a></li> 
          <li><a class="page-scroll" href="#tm_sec">Team</a></li> 
         </ul> 
        </div>  
        </nav>   
       </div>     

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