twitter-bootstrap Bootstrap 中未显示下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14023115/
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
Dropdown menu not showing in Bootstrap
提问by ezequiel-garzon
I'm trying to get a basic dropdown menuin Bootstrap:
我正在尝试在 Bootstrap 中获得一个基本的下拉菜单：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</body>
</html>
However, nothing shows up. I know the local CSS and JS files are being referred correctly. As far as I understand, the default JS includes all the plugins.
但是，什么都没有显示。我知道正确引用了本地 CSS 和 JS 文件。据我了解，默认 JS 包括所有插件。
EDIT: Thanks to all for your feedback. I can only add, in case people find themselves in the same situation I am, to move further downin the tutorial before copying and pasting the snippets.
编辑：感谢大家的反馈。我只能添加，以防人们发现自己处于与我相同的情况，在复制和粘贴片段之前在教程中进一步向下移动。
回答by David Taiaroa
I think your code was basically good, but you are missing a link to trigger the drop down. See ths jsFiddle
我认为您的代码基本上不错，但是您缺少触发下拉菜单的链接。参见 jsFiddle
Note that I added
请注意，我添加了
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
Here's an example of how to include it in a complete nav bar
这是如何将其包含在完整导航栏中的示例
Good luck!
祝你好运！
回答by Mukesh kumar
Please pay extra attention to comment <-- Link or button to toggle dropdown -->in you code. You need to put a Link or button with data-toggle="dropdown" property to activate the Dropdown.
请特别注意<-- Link or button to toggle dropdown -->代码中的注释。您需要放置一个带有 data-toggle="dropdown" 属性的链接或按钮来激活下拉菜单。
Try this :
试试这个 ：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> TestDropdown
<span class="caret"></span>
</a>
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> TestDropdown
<span class="caret"></span>
</a>
<a class="btn btn-default" data-toggle="dropdown"> Dropdown Test </a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>回答by Miha Rekar
From the docs:
从文档：
Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.
查看下拉菜单，这里是所需的 HTML。您需要将下拉列表的触发器和下拉菜单包装在 .dropdown 或其他声明 position:relative; 的元素中。然后只需创建菜单。
So you probably need to set the CSS for your dropdownclass to have (at least) position: relative;. Also you have a display:noneon .dropdown-menuby default. Try also overriding that.
因此，您可能需要为您的dropdown类设置 CSS （至少）position: relative;。你也有一个display:none上.dropdown-menu默认。也尝试覆盖它。
回答by Rajarshi
Instead of div,try a parent ul and li to wrap your ul that you have posted above. for example,
而不是 div，尝试使用父 ul 和 li 来包装您在上面发布的 ul。例如，
<ul class="nav nav-pills span7 pull-right" id="upper_username_hide">
<li class= "dropdown" data-dropdown="dropdown">
<a id="" class="dropdown-toggle" data-toggle="dropdown" href="#">
<b class="caret dropdown-toggle"></b>
</a>
<ul class="dropdown-menu" >
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</li>
</ul>
I dont think tab-index will be necessary as bootstrap css takes care of that. Good luck!
我不认为 tab-index 是必要的，因为 bootstrap css 会处理这个问题。祝你好运！
回答by Ruben
In my case I discovered the .dropdown-menubootstrap class had set the top property to:top: 100%, that caused that the dropdown was shown outside the viewport. I did override the top value with another class and now is working.
就我而言，我发现.dropdown-menu引导程序类已将 top 属性设置为: top: 100%，这导致下拉列表显示在视口之外。我确实用另一个类覆盖了最高值，现在正在工作。
