Html 引导程序/下拉按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13998683/
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
Bootstrap / Dropdown Button
提问by felix001
Hi Im trying to create a dropdown button using bootstrap. But it just doesnt seem to come out correctly ?
嗨，我正在尝试使用引导程序创建一个下拉按钮。但它似乎没有正确出现？
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
</ul>
</div>
A jsfiddle is here http://jsfiddle.net/UrgP8/
一个 jsfiddle 在这里http://jsfiddle.net/UrgP8/
Any ideas ?
有任何想法吗 ？
Thanks,
谢谢，
回答by mg1075
You are loading a hefty amount of external resources into jsfiddle by pasting what is practically the full boostrap html source into the html view.
通过将几乎完整的 boostrap html 源代码粘贴到 html 视图中，您正在将大量外部资源加载到 jsfiddle 中。
Here is a much more bare-bones version that loads only three external files.
这是一个更简单的版本，它只加载三个外部文件。
The base html is the same (SO wouldn't let me post without putting in code...)
基本 html 是相同的（所以不会让我在没有输入代码的情况下发布......）
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
</ul>
</div>
Note that jQuery is loaded via jsFiddle's Framework panel, bootstrap css and js are loaded via the BootstrapCDN:
请注意，jQuery 是通过 jsFiddle 的 Framework 面板加载的，引导 css 和 js 是通过BootstrapCDN加载的：
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js
What happens if you save this html as a page, and run it in a browser?
如果将此 html 保存为页面，然后在浏览器中运行会发生什么？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
</head>
<body>
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
</ul>
</div>
</body>
</html>
回答by Agush
Ok found what seems to be the problem in your fiddle.
好的，在您的小提琴中找到了似乎是问题的地方。
It's that you are loading:
这是你正在加载：
<link href="http://flip.hr/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
I changed it to:
我把它改成：
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
And that basically solved it. You can see it here: http://jsfiddle.net/6hPMb/1/
这基本上解决了它。你可以在这里看到它：http: //jsfiddle.net/6hPMb/1/
But besides that, the problem I mentioned in the comments still stands, you are loading both bootstrap-dropdown.jsand bootstrap.min.js
但除此之外，我在评论中提到的问题仍然存在，您正在加载bootstrap-dropdown.js和bootstrap.min.js
You should only use one.
你应该只使用一个。
