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按鈕在點擊時不起作用

回答

相關問題