html - 移动视图上导航栏引导程序的问题
问题描述
我对 Bootstrap 的导航栏有疑问。我不明白为什么,但是当我将此网页放在移动视图上时,当我单击右侧的按钮时,Bootstrap Navbar 折叠不显示......这是我的代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="nav.css">
<link rel="icon" href="favicon.ico">
<title>SmartHorse | Accueil</title>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script src="https://kit.fontawesome.com/f7131c55f8.js" crossorigin="anonymous"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img src="Logo_V2.jpeg" alt="cheval" class="nav-logo image-logo">
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
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">
<a class="nav-link" href="index.html">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blockchain.html">La technologie blockchain</a>
</li>
<li class="nav-item" style="background-color: white; height: 23px; width: 23px; margin-top: 8px; margin-left: 8px">
<a href="https://www.linkedin.com/company/smarthorse/"><img src="https://www.makrea.com/img_pngs/RS03.png" alt="logo linkedin" style="width: 25px; padding-bottom: 5px"></a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
非常感谢您的帮助!
解决方案
我将代码复制到我的编辑器并打开文件,我在这里没有看到任何问题,按预期工作。您在哪个浏览器上查看文件?或者也许你没有身体标签?您似乎只有结束的正文标签。
推荐阅读
- ios - 后台长时间运行的 BLE 扫描有时仅适用
- tensorflow - 尝试将一层的输出用作另一层的输入。(KERAS tensorflow 后端)
- java - 相交查询如何在糖 ORM 中工作
- android - 将 Firebase 集成到功能时遇到麻烦
- java - 如何从 testNG 测试计划中传递 invocationCount 的值
- ruby-on-rails - 如何在 ruby 中将新属性包含到我的 json 数组中?
- python - Python/Pandas:选择特定值并返回系列
- r - R:绘制值网格
- css - 我的图像在悬停时闪烁
- python - list() 函数混淆