CSS Twitter Bootstrap 下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9051200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap dropdown menu
提问by Leahcim
I'm trying to use Twitter Bootstrap's dropdown menu in its top nav bar. You can see an example working here. http://twitter.github.com/bootstrap/#
我正在尝试在其顶部导航栏中使用 Twitter Bootstrap 的下拉菜单。您可以在此处看到一个示例。http://twitter.github.com/bootstrap/#
In mine, the arrow indicating that it's a dropdown shows on the menu but when I hover or click on it it doesn't reveal my dropdown links. I think I've included all the necessary classes, and I don't believe Twitter's requires javascript.
在我的中，指示它是下拉菜单的箭头显示在菜单上，但是当我悬停或单击它时，它不会显示我的下拉链接。我想我已经包含了所有必要的类，而且我认为 Twitter 不需要 javascript。
Can you see what I'm doing wrong?
你能看出我做错了什么吗？
My dropdown
我的下拉菜单
<div class='topbar' data-dropdown="dropdown">
<div class='fill'>
<div class='container'>
<ul class="nav">
<li><%= link_to 'Home', main_app.root_path %></li>
<li><%= link_to 'Outlines', main_app.outlines_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Assessment</a>
<ul class="dropdown-menu">
<li><a href="#">second link </a></li>
<li><a href="#">third link </a></li>
</ul>
</li>
..... I go on to close all the divs etc. The nav bar looks great but the dropdown just doesn't work.
Twitter Bootstrap
推特引导程序
<div class="topbar" data-dropdown="dropdown">
<div class="topbar-inner">
<div class="container">
<h3><a href="#">Project Name</a></h3>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
<form class="pull-left" action="">
<input type="text" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- /topbar-inner -->
</div>
回答by Leahcim
It actually requires inclusion of Twitter Bootstrap's dropdown.js
它实际上需要包含 Twitter Bootstrap 的 dropdown.js
回答by Andy
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
回答by baptme
It's also possible to customise your bootstrap build by using:
也可以使用以下方法自定义引导程序构建：
http://twitter.github.com/bootstrap/customize.html
http://twitter.github.com/bootstrap/customize.html
All the plugins are included by default.
默认情况下包含所有插件。
回答by markotikvic
You must include jQuery in the project.
您必须在项目中包含 jQuery。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I didn't find any doc about this so I just opened a random code example from tutorialrepublic.com http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php
我没有找到任何关于此的文档，所以我只是从 tutorialrepublic.com http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php打开了一个随机代码示例
Hope this helps someone else.
希望这对其他人有帮助。
回答by Pankaj Upadhyay
<!DOCTYPE html>
<html lang="en">
<head>
<!-- core CSS -->
<link href="http://webdesign9.in/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webdesign9.in/css/font-awesome.min.css" rel="stylesheet">
<link href="http://webdesign9.in/css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head><!--/head-->
<body class="homepage">
<header id="header">
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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" title="Web Design Company in Mumbai" href="index.php"><img src="images/logo.png" alt="The Best Web Design Company in Mumbai" /></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="term-condition.php">Terms & Condition</a></li></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
<script src="http://webdesign9.in/js/jquery.js"></script>
<script src="http://webdesign9.in/js/bootstrap.min.js"></script>
</body>
</html>
回答by mark1234
I had a similar problem and it was the version of bootstrap.js included in my visual studio project. I linked to here and it worked great
我有一个类似的问题，它是我的 Visual Studio 项目中包含的 bootstrap.js 版本。我链接到这里，效果很好
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
