5

您好我正在尝试使用引导程序创建一个下拉按钮。但它似乎没有正确出来？

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

一个 jsfiddle 在这里http://jsfiddle.net/UrgP8/

有任何想法吗 ？

谢谢，

4

2 回答 2

7

通过将几乎完整的 boostrap html 源代码粘贴到 html 视图中，您将大量外部资源加载到 jsfiddle 中。

这是一个更简单的版本，它只加载三个外部文件。

http://jsfiddle.net/BqKNV/65/

基本 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>

请注意，jQuery 是通过 jsFiddle 的框架面板加载的，bootstrap 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

如果将此 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>
于 2012-12-22T00:40:03.697 回答
4

好的，发现您的小提琴中似乎存在问题。

这是您正在加载：

<link href="http://flip.hr/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

我将其更改为：

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />

这基本上解决了它。你可以在这里看到它：http: //jsfiddle.net/6hPMb/1/

但除此之外，我在评论中提到的问题仍然存在，您正在加载bootstrap-dropdown.js和bootstrap.min.js

你应该只使用一个。

于 2012-12-22T00:55:32.317 回答