这是针对我的手机大小的网站。当我单击汉堡菜单时，导航栏不出现。我的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 回答
蝴蝶不菲
TA贡献1810条经验 获得超4个赞
我已经使用您的代码来复制该问题，但工作正常。检查下面的代码，您可能缺少依赖项之一。
<!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>
- 1 回答
- 0 关注
- 105 浏览
添加回答
举报
0/150
提交
取消