Question

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

如果有人能帮助我弄清楚我在这里缺少什么，我会非常感激。谢谢！

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

Bootstrap下拉菜单不起作用

1 个答案: