html - 汉堡菜单未在引导程序上打开
问题描述
使用引导程序时,我无法打开汉堡菜单。有人能告诉我代码有什么问题吗?
我直接从引导网站上提取了代码。我查看了其他人关于这个问题的问题,但建议的解决方案没有帮助。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;">
<a class="navbar-brand" href="index.html">
<img src="logo.png" width="200" height="200" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact </a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<a href="#"></a>
<a href="#" class="fa fa-instagram"></a>
</div>
</nav>
请简单地为我解释一下,因为我是编码新手。我希望能够在移动设备上打开汉堡菜单。
解决方案
data-target
和id
不一样的。- 您需要
jquery
andbootstrap.js
才能使下拉菜单起作用。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;">
<a class="navbar-brand" href="index.html">
<img src="logo.png" width="50" height="50" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact </a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<a href="#"></a>
<a href="#" class="fa fa-instagram"></a>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
推荐阅读
- reactjs - Axios POST 请求不起作用
- vue.js - 在 vue v-for 中,数据属性的值不显示在循环中
- git - Mac 终端 Git 不工作
- java - 当两个微调器等于特定字符串时,如何允许调用函数?
- java - 远程休息 api 更改时运行 postconstruct 注释方法
- mongodb - 如何从以特定文本开头且仅以 mongodb 中的数字结尾的条目中获取数字数组?
- python - 从视频中捕获图像后将图像上传到s3
- wordpress - 如何在图库中查看网站模板?
- ckeditor - CKEditor 4 - cannot replace selection
- c# - 如何从 IIS 绑定中获取 IP 地址