Bootstrap下拉菜單不起作用
[英]Bootstrap dropdown menu not working
問題描述
我在使用引導程序的下拉菜單時遇到了一些麻煩。 我在這里瀏覽了其他問題，但找不到適合我的答案。 這是HTML頭
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>On-Demand Reporting</title>
<link rel="stylesheet" type="text/css" href="styles/gridinator.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="scripts/bootstrap.js" type="text/javascript"></script>
<script src="scripts/jquery.tabify.js" type="text/javascript"></script>
</head>
我在bootstrap.js之前做了仔細的說明以鏈接到JQuery
這是按鈕的代碼。 這個標記幾乎完全來自bootstrap 3 docs
<button type="button" class="btn btn-default dropdown pull-right" data-toggle="dropdown">
User <span class="caret"></span>
</button>
<ul class="dropdown-menu active" role="menu">
<li><a href="#">Change Password</a></li>
<li><a href="#">Logout</a></li>
</ul>
然后，當然可以使用腳本來調用下拉列表。
<script>
$("document").ready(function() {
$(".dropdown").dropdown();
});
</script>
如果有人可以幫助我弄清楚我在這里缺少什么，我將非常感激。 謝謝！
1 個解決方案
解決方案1
1 2013-10-28 15:32:29
您需要使用具有.dropdown類的元素包裝整個下拉菜單
您還需要從button刪除.pull-right並將其應用於.dropdown
<div class="dropdown pull-right">
<button type="button" class="btn btn-default dropdown" data-toggle="dropdown">
User <span class="caret"></span>
</button>
<ul class="dropdown-menu active" role="menu">
<li><a href="#">Change Password</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
Bootstrap菜單中的下拉菜單不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.