2016-06-29 16 views
3

jumbotronベースのページのモバイル版を試しても、navbarはトグルしません。私はそれがthe exampleのように折りたたみたいですが、そうではありません。たぶん私はいくつかのコードが不足している、あなたはそれを動作させることができますか?このスクリーンショットは、[この例では、ナビゲーションバーが折り畳まれたときの様子です。ブートストラップnavbarがトグルしない

enter image description here

これはジャンボトロンに基づいていますが、ナビゲーションバーの折りたたみ式は、私が右上にあるボタンを押すと、それはトグルしない動作しないmy page、です。

enter image description here

マイコード(例と同じ)。

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 
        aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="/">Customer Service</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <form class="navbar-form navbar-right" action="/account/do_login" method="post"> 
       <div class="form-group"> 
        <input type="text" name="email" placeholder="Email" class="form-control"> 
       </div> 
       <div class="form-group"> 
        <input type="password" name="password" placeholder="Password" class="form-control"> 
       </div> 
       <button type="submit" class="btn btn-success">Sign in</button> 
      </form> 
     </div> 
     <!--/.navbar-collapse --> 
    </div> 
</nav> 
+1

ブラウザのコンソールを確認してエラーがありますか? –

+0

@DivyeshSavaliya残念なことにエラーメッセージはありません。 –

+1

クリック後のチェック –

答えて

3

bootstrap.min.jsまたはbootstrap.jsを確認してください。正しく読み込まれていない可能性があります。

+0

ありがとうございました。今それは動作します。 –

+1

あなたは歓迎されています。 –

0

bootstapとjqueryをインポートする部分を表示できますか?

私は失敗があると思います。私のために、この例が働いているからです。私は輸入品を注文する前に同じ行動を取っていました。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

これは、ブートストラップの適切な機能を提供するために、このために、<head>に配置する必要があります。

関連する問題