为什么引导程序导航栏菜单不显示？
[英]Why won't bootstrap navbar menu show?
问题描述
I'm very new to Bootstrap (and front end dev in general).
我对 Bootstrap（以及一般的前端开发人员）非常陌生。 I'm trying to get a Bootstrap4 navbar to work.我正在尝试让 Bootstrap4 导航栏工作。 I've essentially copied and pasted code from the bootstrap website, but I can't get it working.我基本上从引导程序网站复制并粘贴了代码，但我无法让它工作。
When I shrink the page, the menu does collapse as it should.当我缩小页面时，菜单会按原样折叠。 However, when I click on the collapsed menu, nothing happens.但是，当我单击折叠菜单时，没有任何反应。 Also, on the expanded menu, nothing happens when I click the dropdown menu.此外，在展开的菜单上，单击下拉菜单时没有任何反应。
I've verified path to the boostrap.min.js is correct.我已经验证了 boostrap.min.js 的路径是正确的。
I'm loading this page file via "file://" in my browser, not off a server.我正在通过浏览器中的“file://”加载此页面文件，而不是从服务器上加载。 I don't know if that could be a problem, but I wouldn't think so.我不知道这是否有问题，但我不这么认为。 Anyway, here is the code:无论如何，这是代码：
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" />
<script href="static/js/jquery-3.3.1.min.js"></script>
<script href="static/js/popper.min.js"></script>
<script href="static/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
I'm sure it's something simple (I feel like the javascript isn't loading, for some reason), but I can't figure it out.我确定这很简单（我觉得 javascript 没有加载，出于某种原因），但我想不通。 Anybody see anything obvious?有人看到什么明显的吗？
Edit: I should also note that I don't see any Javascript errors in console, and I'm not sure I'm checking correctly, but it doesn't look like there are event listeners registered for the button (so nothing should happen when I click it).编辑：我还应该注意，我在控制台中没有看到任何 Javascript 错误，我不确定我是否在正确检查，但看起来没有为按钮注册事件侦听器（所以什么都不应该发生当我点击它时）。
Edit2: I just started a quick web server to load this from. Edit2：我刚刚启动了一个快速的 Web 服务器来加载它。 None of the javascript files are being requested from the server.没有从服务器请求任何 javascript 文件。 The main problem seems to be with the loading of the javascript files.主要问题似乎与 javascript 文件的加载有关。 Paths are correct, though.不过，路径是正确的。
Solved: The problem was I was using href for my script tags, instead of src.已解决：问题是我在脚本标签中使用了 href，而不是 src。 Changed to src and everything is working as expected.更改为 src 并且一切都按预期工作。
2 个解决方案
解决方案1
1 2019-01-25 00:19:44
Try the following code below for BootStrap4 Starter template.针对 BootStrap4 Starter 模板尝试以下代码。 It will run anywhere just double click on the file.只需双击文件，它就会在任何地方运行。 All source included from CDN.所有来源均来自 CDN。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../../../favicon.ico"> <title>Starter Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu" aria-labelledby="dropdown01"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <main role="main" class="container"> <div class="starter-template"> <h1>Bootstrap starter template</h1> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> </main><!-- /.container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <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://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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
解决方案2
-1 已采纳 2019-01-25 00:22:59
The attributes for the script tags were all wrong.脚本标签的属性都是错误的。 I had href.我有href。 It should be src.应该是 src。 I fixed it and everything is working now.我修复了它，现在一切正常。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.