ブートストラップナビバーモバイル拡張ボタンが動作しない

Question

このブートストラップナビバーで作業しています。ウィンドウの幅を約76​​7px以下に変更すると、すべてのナビゲーションバーのリンクが使用され、展開ボタンが表示されます。基本的にはモバイルユーザー向けです。それは正しい行動であり、私が期待していることです。

しかし、新しいモバイル拡張ボタンをクリックしても何も起こりません。私はそれを拡大し、ナビゲーションバーで削除されたすべてのリンクを含むメニューを表示したい。たとえば、this pageです。ウィンドウの幅を小さくすると、そのボタンが作成され、クリック可能になります。それが私が達成しようとしていることです。

私はcodepen hereを作成しました。私はまた、私のコードの小さなスニペットを以下に挙げました。しかし、codepenは、何が起こっているかのより良いインタラクティブな例を提供します。私が間違って何をしているのか、そのボタンをクリックすることができない理由は何ですか？

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigationbar" aria-expanded="false"> 
     <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="#">My App</a> 
</div> 

Answer 1

data-target="#navigationbar" 

あなたのナビゲーションメニューのコンテナを指している必要があります。

だから、あなたの場合には、それは次のようになります。

data-target="#bs-example-navbar-collapse-1" 

Answer 2

あなたは携帯電話の画面上で動作するように、ドロップダウンメニューのためのjQueryライブラリとブートストラップJSライブラリをロードする必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>