ブートストラップ4のメニューがロールバックされない

Question

私はブートストラップ4を使用していますが、すべてを試しましたが、ウィンドウを狭くするとナビゲーションリストがロールダウンしません。レイアウトとポジショニングはすべて問題ありませんが、ハンバーガーアイコンをクリックしても何も起こりません。私はCDNとファイルを試してみました。メニューをロールダウンするにはどうしたらいいですか？ありがとうございました。

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 

    <a class="navbar-brand" href="#">Navbar</a> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item active"> 
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Link</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link disabled" href="#">Disabled</a> 
      </li> 
     </ul> 

     <form class="form-inline my-2 my-lg-0"> 
      <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
     </form> 
    </div> 
</nav> 

Answer 1

jQuery、Tether、Bootstrapのjavascriptファイルをインストールする必要があります。そうしないと動作しません。 bootstrap.jsがロードされる前にTetherとjQueryのjavascriptファイルが表示されていなければなりません。これらのライブラリを含めたくない場合は、使用しているフレームワークでcollapse cssクラスを削除/追加することで、簡単にカスタムライブラリを作成できます。

Answer 2

あなたdata-targetが#navbarSupportedContent

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" ></script> 
 

 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
    </button> 
 

 
    <a class="navbar-brand" href="#">Navbar</a> 
 

 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
     <ul class="navbar-nav mr-auto"> 
 
      <li class="nav-item active"> 
 
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#">Link</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link disabled" href="#">Disabled</a> 
 
      </li> 
 
     </ul> 
 

 
     <form class="form-inline my-2 my-lg-0"> 
 
      <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
 
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
 
     </form> 
 
    </div> 
 
</nav>