ブートストラップを使用して折り畳まれているnav-barを表示する方法

Question

私は、画面のサイズを変更するとボタンになるいくつかのボタンを備えたブートストラップのナビゲーションバーを持っています。

ただし、ボタンをクリックすると折りたたみ可能なメニューは表示されません。

私はかなりそれがdivの高さとは関係があると確信していますが、私はかなり問題を見つけることができませんでした。

洞察力/ヒント/ヒント/ヒントをお待ちしております。 Codepen https://codepen.io/oldmanwithbeer/pen/ENzvoY?editors=1100へ

リンク

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-bar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Nav bar</a> 
    </div> 

    <div class="collapse navbar-collapse" id="nav-bar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#social">Links</a></li> 
     <li><a href="#portfolio">Portfolio</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div> 
</nav> 

Answer 1

あなたはNAVの崩壊を動作させるために、両方のjQueryとブートストラップのJavaScriptファイルをインクルードする必要があります。

私はここで作業バージョンを使用してcodepenコードを更新しました：

https://codepen.io/egerrard/pen/YpmOGo

あなたが追加する必要がありますタグのようなものになります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 

は確かにjQueryが含まれてください最初。

また、ブートストラップのウェブサイトのGetting Startedページでは、この情報を案内しています。