Bootstrap 4菜單沒有滾下

我使用Bootstrap 4，儘管我嘗試了所有我能想到的事情，但是當我縮小窗口時，導航列表不會滾下。佈局和定位明智的一切都很好，但是當我點擊漢堡包圖標時，什麼也沒有發生。我試着用CDN和文件。我怎樣才能讓菜單滾下去？謝謝。Bootstrap 4菜單沒有滾下

<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>

來源

2017-08-01 Tarasi Cristi Andrei

您需要安裝jQuery，Tether和Bootstrap JavaScript文件，否則它將無法工作。在加載bootstrap.js之前，繫繩和jQuery JavaScript文件必須出現。如果你不想包含這些庫，通過在你正在使用的任何框架中刪除/添加摺疊css類來製作自定義庫非常容易。

來源

2017-08-01 22:00:43 thomasmeadows

你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>

來源

2017-08-01 22:02:18

謝謝您的回答。我已經用data-target =「＃navbarSupportedContent」進行了修復，但它仍然無法工作。 –

@TarasiCristiAndrei然後你可能會錯過jQuery腳本。請參閱答案中的示例。 –

Bootstrap 4菜單沒有滾下

回答

相關問題