Bootstrap 4导航栏切换不起作用
Posted
技术标签:
【中文标题】Bootstrap 4导航栏切换不起作用【英文标题】：Bootstrap 4 navbar toggle not working 【发布时间】：2018-09-03 03:53:32 【问题描述】：我已经在 SO 上的多个线程中搜索了这个问题，对于为什么这不起作用，这是一个真正令人头疼的问题。下面的示例（来自有关此问题的 SO 线程）在 jsFiddler 中时有效，但在我从本地计算机提供时无效。
因此，我从字面上将代码从 jsFiddler 复制粘贴到我自己的文件中，并将该文件加载到同一浏览器中，并在 fiddler 预览窗口中正确呈现它。
我已经尝试添加 !doctype html 标签，并且我已经尝试在标题/链接 rel 部分周围使用和不使用 head 标签，没有任何变化。导航栏在左侧呈现品牌名称和地球，然后是“链接 1 链接 2 链接 3”，然后是空白，然后登录/注册/注销呈现在导航栏的右侧。我还尝试将其作为开发服务器的 django 页面提供，我尝试将其放入平面 HTML 文件中并从文件系统中拖放它。我还尝试了几个来自 SO 的非常相似的示例，具有相同的基本结果。
这是我服务器上的页面： http://www.walesdata.com/test.html
下面是它如何为我呈现的屏幕截图： http://www.walesdata.com/Screen.png
当我看到工作示例时，我喜欢它的外观和功能，但我还没有让它在本地工作。
<!DOCTYPE html>
<html lang="en">
<title>
Site title
</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<i class="fa fa-globe" aria-hidden="true"></i> Brand Name
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-angle-double-down"></i>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="#" class="nav-link ">Link 1</a></li>
<li class="nav-item"><a href="#" class="nav-link ">Link 2</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link 3</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link ">Sign In</a></li>
<li class="nav-item"><a href="#" class="nav-link ">Register</a></li>
<li class="nav-item"><a href="#" class="nav-link ">Log Out</a></li>
</ul>
</div>
</nav>
</div>
<div class="container">
<nav class="navbar navbar-inverse fixed-bottom text-center">
<!--<a class="navbar-brand" href="#">Fixed bottom</a>-->
<h6 class="text-center">Footer</h6>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</html>
系统信息：Mint Linux 和 Mozilla Firefox。从 django 2.0 和文件系统上的平面 HTML 文件提供。
【问题讨论】：
您发布的 HTML 可以正常工作：codeply.com/go/pm84HoGug6，如果问题无法重现，我们也无能为力。确保您按确切顺序正确包含 jquery.js、popper.js 和 bootstrap.js。 什么不起作用？它不加载资源？它加载了资源，但显示不正确？？ 这里是公共服务器上页面的链接：walesdata.com/test.html，这是我机器上的屏幕截图链接：walesdata.com/Screen.png 编辑了主要评论以包含这些附加信息。 我检查了你的代码，如果你遇到任何问题，它工作正常，然后在你的 html 底部包含 jquery。 【参考方案1】：在 Bootstrap 4.1 中，我通过手动调用 JS 以在 button 中使用 onclick 处理程序切换来解决此问题：
<button onclick="$('#navbar-main-collapse-1').toggleClass('collapse')" type="button">
<i aria-hidden="true" class="fa fa-bars"/>
</button>
此处示例：https://www.xn--javiercaon-09a.com/2018/01/servicio-atencion-cliente-social-crm-scrm.html
【讨论】：
【参考方案2】：这样做的结果是 navbar-collapse 将在笔记本电脑上呈现为常规导航栏，然后在较小的屏幕上成为折叠版本。因此，如果您进入移动视图（Firefox 中的 Ctl+Shift+M），您将正确看到折叠。
【讨论】：
以上是关于Bootstrap 4导航栏切换不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Laravel 导航栏切换在 bootstrap 4.4.1 和 jquery 3.3 上不起作用
切换按钮在引导程序4中不起作用，而角度7应用程序在导航栏中不起作用