2013-10-16 36 views
1

新引导并尝试构建一个导航栏,当它折叠菜单项消失时,它显示三个图标栏,单击时显示菜单下拉。当你点击图标栏时,代码就可以正常工作,但是当它的点击菜单项没有显示时。有什么建议么。bootstrap 3折叠navbar图标栏不起作用

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" href="css/bootstrap.css"> 
<title>Untitled Document</title> 
</head> 


<div class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-  target=".navbar-ex1-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="#" class="navbar-brand"> Text Here</a> 
     </div> 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
      <ul class="nav navbar-nav"> 
       <li> <a href="#">Home</a></li> 
       <li> <a href="#">about</a></li> 
       <li> <a href="#">tutorias</a></li> 
       <li> <a href="#">contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 

</body> 
</html> 

回答

3

有空格你data- target=".navbar-ex1-collapse" HTML ..如果你删除此它应该很好地工作:

http://bootply.com/88198

此外,用于引导文档navbar-ex1-collapse因为有几个例子导航栏。您可以设置data-target=".navbar-collapse",它也可以工作。