2012-12-21 10 views
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/

任意のアイデアですか?

おかげで、

+1

これはjavascriptの問題のようです:まずはbootstrap-dropdown.jsとbootstrap.min.jsを含めればいいですが、必要なのは1つだけですが、それはフィドルの問題を解決しません。 – Agush

答えて

7

あなたは事実上HTMLビューにフルブートストラップのhtmlソースが何であるかを貼り付けることによってjsfiddleに外部リソースの多額の金額をロードしています。

これは、外部ファイルが3つだけロードされる、より多くのベアボーンバージョン です。 jQueryのjsFiddleのフレームワークパネルを経由してロードされていることをベースHTMLが同じである

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

(SO私は、コードを入れずに投稿することはできないだろう...)

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

注意、 ブートストラップ

//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
// netdn:CSSとjsがBootstrapCDN介してロードされていますあなたがページとして、このHTMLを保存し、ブラウザでそれを実行する場合


a.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.jsはどうなりますか?

<!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> 
+0

ありがとう応答。彼らはすべてjsfiddleで動作しているようですが、ブラウザで直接試してみると同じ問題が発生します。 – felix001

+0

@ felix001 - あなたは何を意味するかはっきりしていません。私はコードを貼り付け、いくつかの項目を削除してjsfiddleに追加しました。それをブラウザで実行するとどうなりますか? – mg1075

+0

多くのありがとう、今私はそれがどのようにjsスクリプトをロードしていたと思うかと思います。 – felix001

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/


しかし、それ以外にも、私はコメントで述べた問題はまだ立って、あなたは両方のブートストラップ・dropdown.jsbootstrap.min.js

をロードしているが

1つだけ使用してください。