0

我在使用引导程序的下拉菜单时遇到了一些问题。我在这里浏览了其他问题，但没有找到适合我的答案。这是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 文档

<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>

如果有人可以帮助我弄清楚我在这里缺少什么，我将不胜感激。谢谢！

4

1 回答 1

1

您需要使用具有.dropdown类的元素包装整个下拉菜单

您还需要从中删除.pull-right并将button其应用于.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>

示例：http: //jsfiddle.net/52VtD/404/

于 2013-10-28T15:32:29.817 回答