Bootstrap 4 汉堡菜单不显示导航栏
这是针对我的手机大小的网站。当我单击汉堡菜单时，导航栏不出现。我的data-target匹配nav id所以我不确定为什么它不起作用。
<section id="nav">
<nav class="navbar navbar-light navbar-expand-md py-2">
<a href="index.html">
<img src="./img/logo.png" class="img-fluid mw-121 height: auto" alt="Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLinks"><span
class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarLinks">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flavors.html">Flavors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="details.html">What's Included</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reserve.html">Reserve Today</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
</div>
</nav>
</section>
一只萌萌小番薯1回答
-
蝴蝶不菲
我已经使用您的代码来复制该问题，但工作正常。检查下面的代码，您可能缺少依赖项之一。<!DOCTYPE html><html><head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script></head><body> <section id="nav"> <nav class="navbar navbar-light navbar-expand-md py-2"> <a href="index.html"> <p>Test Image here</p> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLinks"><span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarLinks"> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="index.html">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="flavors.html">Flavors</a> </li> <li class="nav-item"> <a class="nav-link" href="details.html">What's Included</a> </li> <li class="nav-item"> <a class="nav-link" href="reserve.html">Reserve Today</a> </li> <li class="nav-item"> <a class="nav-link" href="faq.html">FAQ</a> </li> </ul> </div> </nav> </section></body></html>
随时随地看视频慕课网APP
相关分类
Html5