Bootstrap導航欄不會在小屏幕設備上摺疊

Question

Bootstrap .navbar不會摺疊。它響應迅速。當我在小設備中看到這個編碼的網站時。然後它做的是使導航欄小廣告垂直，但它不會摺疊每一頁只留在屏幕上。我試圖在網上搜索，但他們的代碼是有點不同，那麼這一個。請檢查並告訴我我犯了什麼錯誤。非常感謝。

<header> 
    <div class="container"> 
     <nav class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="index.html"><img src="img/logo.png" class="logo" alt="Tweakwebs | Web Design And Development" /></a> 
      </div> 
      <div> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li> 
       <li><a href="#service">Service</a></li> 
       <li><a href="#pricing">Pricing</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact">Contact</a></li> 
       <li><a href="#disclaimers">Disclaimers</a></li> 
       </ul> 
      </div> 
       <div class="nav navbar-btn navbar-right"> 
       <button class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Login</button> 
       <button class="signupbtn btn btn-primary"><span class="glyphicon glyphicon-pencil"></span> Signup</button> 
       </div> 
      </div> 

     </nav> 
    </div><!-- end of container --> 
</header> 

Answer 1

你錯過了一些東西：collapse和navbar-toggle。看例子。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<header> 
 
    <div class="container"> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 

 
      </button> 
 
      <a class="navbar-brand" href="index.html"> 
 
      <img src="img/logo.png" class="logo" alt="Tweakwebs | Web Design And Development" /> 
 
      </a> 
 

 
     </div> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a> 
 

 
      </li> 
 
      <li><a href="#service">Service</a> 
 

 
      </li> 
 
      <li><a href="#pricing">Pricing</a> 
 

 
      </li> 
 
      <li><a href="#about">About</a> 
 

 
      </li> 
 
      <li><a href="#contact">Contact</a> 
 

 
      </li> 
 
      <li><a href="#disclaimers">Disclaimers</a> 
 

 
      </li> 
 
      </ul> 
 
     </div> 
 
     <div class="nav navbar-btn navbar-right"> 
 
      <button class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Login</button> 
 
      <button class="signupbtn btn btn-primary"><span class="glyphicon glyphicon-pencil"></span> Signup</button> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
    <!-- end of container --> 
 
</header>