BootStrap navbar-collapse按钮在点击时不起作用

我是bootstrap，尝试创建导航栏。当窗口大小调整到特定级别以下时，我希望菜单项显示在下拉列表中。我的菜单项在调整窗口大小时会折叠，但是在单击导航栏折叠按钮时不会显示下拉列表。任何帮助表示赞赏。我有评论当场在代码段我有麻烦BootStrap navbar-collapse按钮在点击时不起作用

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initialscale=1"> 
 
<title>Bootstrap 101 Template</title> 
 
<!-- Bootstrap --> 
 

 
<!--<link href="css/bootstrap.min.css" rel="stylesheet">--> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 

 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 

 

 
<style type="text/css"> 
 
\t .my{ 
 
\t \t background-color: #d3d3d3; 
 
\t \t border:solid grey; 
 
\t } 
 
\t 
 
</style> 
 

 
</head> 
 
<body> 
 

 
\t <div class="navbar navbar-default"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="navbar-header"> 
 
\t \t \t \t <a href="" class="navbar-brand">MB's Website</a> 
 
\t \t \t \t 
 
\t \t \t \t <button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse"> 
 
\t \t \t \t \t <span class="sr-only">Toggle navigation</span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t </button> \t 
 
\t \t \t \t 
 
\t \t \t \t </div> 
 
    <!--The following div doesn't open in the drop down menu--> 
 
\t \t \t <div class="collapse navbar-collapse"> 
 
\t \t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t \t <li><a href="">Home</a></li> 
 
\t \t \t \t \t <li><a href="">Services</a></li> 
 
\t \t \t \t \t <li><a href="">About</a></li> 
 
\t \t \t \t \t <li><a href="">Contact Us</a></li> \t \t \t \t \t 
 
\t \t \t \t </ul> 
 
\t \t \t \t 
 
\t \t \t </div> \t 
 
\t \t </div> 
 

 
\t </div> 
 

 
\t <h1>Hello, world!</h1> 
 

 
\t <div class="row"> 
 
\t \t <div class="col-md-6 my">content</div> 
 
\t \t <div class="col-md-6 my">content</div> 
 
\t </div> 
 

 
\t <div><p> </p></div> 
 

 
\t 
 

 

 
\t <div class="row"> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t </div> 
 

 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="jquery-3.2.1.min."></script> 
 
<!-- Include all compiled plugins (below), or include individual files 
 
as needed --> 
 
<script src="js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initialscale=1"> 
 
<title>Bootstrap 101 Template</title> 
 
<!-- Bootstrap --> 
 

 
<!--<link href="css/bootstrap.min.css" rel="stylesheet">--> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 

 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 

 

 
<style type="text/css"> 
 
\t .my{ 
 
\t \t background-color: #d3d3d3; 
 
\t \t border:solid grey; 
 
\t } 
 
\t 
 
</style> 
 

 
</head> 
 
<body> 
 

 
\t <div class="navbar navbar-default"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="navbar-header"> 
 
\t \t \t \t <a href="" class="navbar-brand">MB's Website</a> 
 
\t \t \t \t 
 
\t \t \t \t <button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse"> 
 
\t \t \t \t \t <span class="sr-only">Toggle navigation</span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t </button> \t 
 
\t \t \t \t </div> 
 
\t \t \t 
 
    <!--The following div doesn't open in the drop down menu--> 
 
\t \t \t 
 
     <div class="collapse navbar-collapse"> 
 
\t \t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t \t <li><a href="">Home</a></li> 
 
\t \t \t \t \t <li><a href="">Services</a></li> 
 
\t \t \t \t \t <li><a href="">About</a></li> 
 
\t \t \t \t \t <li><a href="">Contact Us</a></li> \t \t \t \t \t 
 
\t \t \t \t </ul> 
 
\t \t \t \t 
 
\t \t \t </div> \t 
 
\t \t </div> 
 

 
\t </div> 
 

 
\t <h1>Hello, world!</h1> 
 

 
\t <div class="row"> 
 
\t \t <div class="col-md-6 my">content</div> 
 
\t \t <div class="col-md-6 my">content</div> 
 
\t </div> 
 

 
\t <div><p> </p></div> 
 

 
\t 
 

 

 
\t <div class="row"> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t </div> 
 

 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="jquery-3.2.1.min."></script> 
 
<!-- Include all compiled plugins (below), or include individual files 
 
as needed --> 
 
<script src="js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

“下面的DIV不会在下拉菜单中打开”

Thankyou

来源

2017-08-25 Mubeen Ul Haq

你有一个错误的数据属性引导3使用正确的CSS js文件，它应该是'数据toggle'，不'datatoggle '。 – hcheung

加载jquery以上的bootstrap js文件，并且您使用的是bootstrap 3样式和bootstrap 4 javascript –

所以请使用正确版本的bootstrap js和css文件 –

使用bootstrap的正确版本文件。不要混合在一起Ë版本，这意味着如果你正在使用的该版本

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initialscale=1"> 
 
<title>Bootstrap 101 Template</title> 
 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />  
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<style type="text/css"> 
 
\t .my{ 
 
\t \t background-color: #d3d3d3; 
 
\t \t border:solid grey; 
 
\t } 
 
\t 
 
</style> 
 

 
</head> 
 
<body> 
 

 
\t <div class="navbar navbar-default"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="navbar-header"> 
 
\t \t \t \t <a href="" class="navbar-brand">MB's Website</a> 
 
\t \t \t \t 
 
\t \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
\t \t \t \t \t <span class="sr-only">Toggle navigation</span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t </button> \t 
 
\t \t \t \t </div> 
 
\t \t \t 
 
    <!--The following div doesn't open in the drop down menu--> 
 
\t \t \t 
 
     <div class="collapse navbar-collapse"> 
 
\t \t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t \t <li><a href="">Home</a></li> 
 
\t \t \t \t \t <li><a href="">Services</a></li> 
 
\t \t \t \t \t <li><a href="">About</a></li> 
 
\t \t \t \t \t <li><a href="">Contact Us</a></li> \t \t \t \t \t 
 
\t \t \t \t </ul> 
 
\t \t \t \t 
 
\t \t \t </div> \t 
 
\t \t </div> 
 

 
\t </div> 
 

 
\t <h1>Hello, world!</h1> 
 

 
\t <div class="row"> 
 
\t \t <div class="col-md-6 my">content</div> 
 
\t \t <div class="col-md-6 my">content</div> 
 
\t </div> 
 

 
\t <div><p> </p></div> 
 

 
\t 
 

 

 
\t <div class="row"> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t \t <div class="col-md-1 my">content</div> 
 
\t </div> 
 

 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="jquery-3.2.1.min."></script> 
 
<!-- Include all compiled plugins (below), or include individual files 
 
as needed --> 
 
<script src="js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

来源

2017-08-26 06:37:14

BootStrap navbar-collapse按钮在点击时不起作用

回答

相关问题