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菜单没有滚下

回答

相关问题