Bootstrap Dropdown显示两倍?怪异的一 [英] Bootstrap Dropdown shows double? Weird One
问题描述
好的，所以我在做一些非常简单的事情时遇到了一个奇怪的问题，在经过两天的高低搜索之后，我想知道这里是否有人可以向我指出正确的方向:
Ok, so I've run into a weird problem while doing something pretty straightforward, and after two days of searching high and low, I wonder if anybody here can point me in the right direction:
我正在使用Twitter Bootstrap用Nav-Pills构建一个简单的下拉菜单. 我正在遵循所有说明(没什么复杂的)，并通过CDN链接到bootstrap.min.js，bootstrap.min.css和jquery.min.js.
I'm building a simple dropdown menu with Nav-Pills using Twitter Bootstrap. I'm following all the instructions (nothing complicated), and am linking to bootstrap.min.js, bootstrap.min.css and jquery.min.js via cdn.
但是，输出显示下拉菜单项两次，一次是垂直堆叠的翻转下拉列表，非常好，弹出并隐藏，但是 覆盖的是另一组完全相同的drowdownlist项，这一次水平展开，并一直在那里显示，一直显示，没有添加任何切换功能.
However, the output shows the dropdown items twice, once as a toggled dropdownlist that is stacked vertically really nice and pops up and hides as you would expect, but then also overlayed is another set of the exact same drowdownlist items, this time horizontally spread out, and just there, displaying all the time, with no toggle functionality added.
顺便说一句，我试图将其重新创建为jsfiddle，在那儿，甚至没有显示下拉列表.
BTW, i tried to recreate this as a jsfiddle and over there, the dropdown list just doesn't even show.
这对我来说很奇怪，我有点超出方向了.有什么想法吗?非常感谢您的帮助！
This is so weird to me, i've kind of run out of directions. Any ideas, anyone? Help is much appreciated!
我的代码:
<head>
<title>Trial</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="navbar-bottom">
<div class="container-fluid">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Active Link</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown Link</a>
<ul class="dropdown-menu">
<li><a href="#">Option1</a></li>
<li><a href="#">Option2</a></li>
</ul>
</li>
</ul>
</div>
</nav>
，这里是屏幕截图: 这是打开的:
and here the screenshots: this is toggled on :
此功能已关闭:
推荐答案
请尝试以下代码:
<li class="dropdown"><a href="javascript:void();" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown Link</a>
<ul class="dropdown-menu">
<li><a href="#">Option1</a></li>
<li><a href="#">Option2</a></li>
</ul>
</li>
我已经在您的jsfiddle中进行了编辑，对我有用.请检查一下.
I have edited in your jsfiddle and it works for me. Please check it.
这篇关于Bootstrap Dropdown显示两倍?怪异的一的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
