Navbar不會下拉菜單崩潰後使用引導

我似乎無法弄清楚爲什麼我的右上角的按鈕「菜單」不會觸發下拉菜單。任何人都可以指出什麼是錯的？當我點擊它時沒有任何反應，但「家」應該下拉。Navbar不會下拉菜單崩潰後使用引導

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Store</title> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
<link href="index.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
<div class="navbar navbar-inverse navbar-static-top"> 
<div class="container"> 

<a href = "#" class ="navbar-brand">Site</a> 

<button class="navbar-toggle" data-toggle="collapse" data-target = ".navHeaderCollapse"> 
Menu 
</button> 
<div class="collapse navbar-collapse navHeaderCollapse"> 
<ul class = "nav navbar-nav navbar-right"> 

<li><a href="#">Home</a></li> 

</ul> 
</div> 
</div> 

</div> 









<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
</body> 
</html>

來源

2016-01-26 user6680

HTML塊有助於我們很少。你可以在codepen中複製這個嗎？ –

這裏你去：http://codepen.io/anon/pen/rxdqZB – user6680

您需要加載bootstraps JavaScript庫之前加載jquery javascript庫。引導逃跑的jQuery的，並且無需加載它不會工作第一所以bootstrap.js添加鏈接之前的jQuery它看起來應該像下面這樣：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

此外，如果你希望你的導航欄正常工作，你應該包住導航欄標題類中的導航欄品牌和菜單按鈕。如果您希望菜單以移動寬度顯示在導航欄中，則可以保持原樣。

這裏是一個工作codepen Codepen

來源

2016-01-26 21:15:21

檢查此琴：fiddle

導航欄看起來很好了大屏幕上，但是當屏幕尺寸縮小，點擊後會出現該菜單選項將顯示在主頁選項導航。

你的代碼唯一的問題是你沒有調用jQuery庫。這是運行引導程序JavaScript所必需的。

在調用引導javascript之前，您只需要在html的頭部添加此腳本標記。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

來源

2016-01-26 21:16:03 stark

這2個文件丟失。你需要包含它們。

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

沒有這些文件，它將無法正常工作。

CHECK THIS FILE

來源

2016-01-26 21:39:49

Navbar不會下拉菜單崩潰後使用引導

回答

相關問題