Twitter Bootstrap，導航欄，下拉不能正常工作

我想用bootstrap製作一個響應式導航欄。但是，下拉菜單無法正常工作。Twitter Bootstrap，導航欄，下拉不能正常工作

我想在品牌名稱下拉下來，而不是與它一起。

這裏是我的代碼：

<html> 
<head> 
<meta name="viewport" content="width=device-width, intial-scale=1.0"> 
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
<div class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 
     <a href="#" class="navbar-brand">ACUPRESSURE</a> 

     <button type="button" class = "navbar-toggle" data-toggle ="collapse" data-target = ".navHeaderCollapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <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><a href ="#">Home</a></li> 
       <li><a href ="#">Home</a></li> 
       <li><a href ="#">Home</a></li> 
       <li><a href ="#">Home</a></li> 
       <li><a href ="#">Home</a></li> 
      </ul> 
     </div>   
    </div> 
</div> 
<script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> 
<script src= "js/bootstrap.js"></script> 
</body> 
</html>

來源

2015-11-28 Rishabh Kapoor

你缺少navbar-header類包圍navbar-toggle和navbar-brand。請參閱Docs。

工作示例。

<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" /> 
 
<div class="navbar navbar-inverse navbar-static-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button><a href="#" class="navbar-brand">ACUPRESSURE</a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse navHeaderCollapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">Home</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-11-28 21:59:22 vanburen

非常感謝你。我是新來的。你能告訴我一些我可以學習的在線資源嗎？ –

Twitter Bootstrap，導航欄，下拉不能正常工作

回答

相關問題