2017-03-01 189 views
0

我想用引导程序创建简单的响应式导航栏。我不知道什么原因,但崩溃导航栏不工作。已将数据目标分配给可折叠的div仍无效。在导航栏不工作的引导程序崩溃

<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse-1"> 
       <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">Humanity</a> 
     </div> 

     <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="#Menu 1">Menu 1</a> 
       </li> 
       <li> 
        <a href="#Menu 2">Menu 2</a> 
       </li> 
       <li> 
        <a href="#Menu 3">Menu 3</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

回答

0

你忘了你的data-target.

现在,它的做工精细检查片段添加#

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
     
 
     
 
     
 
     </head> 
 
     <body> 
 
     
 
     
 

 
<nav class="navbar navbar-inverse" role="navigation"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
 
       <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">Humanity</a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li> 
 
        <a href="#Menu 1">Menu 1</a> 
 
       </li> 
 
       <li> 
 
        <a href="#Menu 2">Menu 2</a> 
 
       </li> 
 
       <li> 
 
        <a href="#Menu 3">Menu 3</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav> 
 

 
</body> 
 
</html>

+0

感谢现在的工作完全正常。 –