私のnavbarトグルが崩壊しない

Question

私の個人ページをやり直そうとしていて、Navbarに問題があります。私は最初にそれを作ったとき、私は1つを持っていなかった、今私は1つを追加し、レイアウト全体を変更しようとしています。私は鍋を持ち上げて、すべてが適切な場所にあります。画面が小さくてもアイコンが表示されたら、それは崩壊しません。私はブートストラップの指示に従いましたが、私はそれにもっと堪能しようとしていますが、なぜ動作しないのか分かりません。私のコードはcodepen.io jQueryの働いていなかった

<div class="container-fluid"> 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#">PORTFOLIO</a> 
    </div> 

    <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#slide2">Home <span class="sr-only"></span></a></li> 
     <li><a href="#slide2">About</a></li> 
     <li><a href="#slide3">Projects</a></li> 
     <li><a href="#slide4">Contact</a></li> 
     </ul> 
    </div> 

    </div> 
</nav> 

Answer 1

あなたのコードは完璧です。あなたが間違っていたのは、jQueryの前にBootstrapを含めることだけでした。

Thisは、最初にjQueryを含むように注文を変更したコードの作業フォークです。外部リソース（CSSまたはJS）を組み込んだペンの設定をチェックすることで、順序を変更できます。

Answer 2

であり、身体を閉じる前に、あなたのコードの末尾にjQueryのCDNからこれを追加してください：

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>

Answer 3

あなたのJqueryは動作しないようです。あなたのhtml文書の先頭に次の行を追加してください：

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