2017-07-03 42 views
0

我正在使用jQuery和Bootstrap。如下面的html所述,移動按鈕不會展開。 我已經在本網站上檢查確認數據目標,但沒有運氣。 下面是代碼我有,移動按鈕不工作(引導)

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<meta charset="utf-8"> 
    <title>name</title> 
<meta name="description" content="name"> 
<meta content="IE=edge" http-equiv="X-UA-Compatible"> 
<meta content="width=device-width,initial-scale=1" name="viewport"> 

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

<link rel="stylesheet" href="css/main.css"> 
</head> 

<body> 

<!-- Navbar --> 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> <!-- Navbar Header --> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <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"> name </a> 
    </div> <!-- End Navbar Header --> 

    <div class="collapse navbar-collapse navbar-right" id="navbar"> 
     <ul class="nav navbar-nav"> 
     <li><a href="lastName_OnlineSummary.pdf">PDF</a></li> 
     <li><a href="https://www.linkedin.com/in/username/">LinkedIn</a></li> 
     <li><a href="https://github.com/username">GitHub</a></li> 
     <li><a href="mailto:[email protected]">Contact</a></li> 
     </ul> 
    </div> <!-- End Navbar-collapse --> 
    </div> <!-- End Container --> 
</nav> <!-- End Navbar --> 

<!-- ... --> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

</body> 
</html> 
+5

你必須在** jQuery後加載Bootstrap腳本**。這是因爲Bootstrap依賴於jQuery,並且該腳本必須先加載,所以Bootstrap的腳本可以使用它。 – makshh

回答

1

你的jQuery後加載引導腳本。這是因爲Bootstrap依賴於jQuery,並且該腳本必須先加載,所以Bootstrap的腳本可以使用它。 像這樣:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
+0

這解決了我的問題。非常感謝! –