我的 Bootstrap 4 导航栏在移动视图中没有折叠
[英]My Bootstrap 4 Navbar isn't collapsing in Mobile View
问题描述
我无法打开导航栏选项，它只是一个实心按钮，单击时会在其周围形成一个环。 我尝试了一些各种解决方案，包括添加和删除脚本、更改导航栏属性等
这是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pan Indus Exim Enterprises</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/vdnewlogo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ab">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#con">Connect</a>
</li>
</ul>
</div>
</div>
</nav>
2 个解决方案
解决方案1
1 已采纳 2020-09-08 11:19:21
首先，请确保您的计算机已连接到 Internet。 这是为了确保您的浏览器加载和保存 CDN。
其次，打开开发者工具ctrl + shift + i （chrome 键盘快捷键）并检查选项卡式控制台上是否有错误。 如果有错误提示，请先修复（最大的问题是CDN链接失效或打字错误）。
如果移动设备上的导航栏仍未折叠，请清除浏览器数据ctrl + shift + del （chrome 键盘快捷键）并重新加载页面。
注意：不推荐或不好的做法是将您的脚本嵌入标签头，请将它们嵌入标签正文的末尾或
</body>之前
解决方案2
0 2021-01-21 11:57:38
它可以正常工作，只需确保您拥有 JavaScript cdn 和合适的浏览器（如 Chrome），有时引导程序不支持其他浏览器。 还要确保您已连接到 Internet，尤其是当您是 Cdn 时。
Bootstrap Navbar在移动视图上不崩溃
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.