2016-04-16 10 views
1

私はどのコードをすべきか混乱しています。だから私はちょうどドロップボックスにサイトを配置し、ここにリンクを投稿します。なぜnav bar collaspeが機能していないのですか?

http://shaylakarzon.kissr.com/nav/index.html

ナビゲーションバーを確認してください。応答はありますが、ウィンドウが小さい場合は機能しません。

私は何かを台無しにしました。私のnavbarはそれが単一であるとき正常に働く。スライダーで調整しようとすると問題が発生します。小さなデバイスレイアウトでは、srのみのボタンをクリックするとメニューが表示されますが、srのみのボタンをもう一度クリックするとメニューが戻らなくなります。前に、このようなブートストラップCSSファイルのリンク をリンクされ、一般的なjqueryのファイルリンクをアップリンク

コード

 <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> 
        <span class="sr-only">toggle Navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 
     </div> <!-- container-fluid --> 
     <div class="collapse navbar-collapse" id="navbar-collapse"> 
      <ul class="nav navbar-nav" id="navbar-scroll"> 
       <li class="active"><a href="">Home</a></li> 
       <li><a href="">Blog</a></li> 
       <li><a href="">About Us</a></li> 
       <li><a href="">Contact Us</a></li> 
      </ul> 
      <div class="navbar-right login_poopup"> 
       <p id="login_poopup"><a>Login<span class="caret"></span> </a></p>  
      </div> 
     </div> 

    </nav> 
+0

jsfiddleを指定してください。 –

+1

詳細を入力してください。あなたが投稿したHTMLはcorectであり、うまく動作します。 – Ganga

+0

あなたのブートストラップのJavaScriptの実装を確認 –

答えて

1

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
+0

ありがとう、それは多くの作品です。 –

関連する問題