[英]Navbar not expanding when running example on localhost
While working through a web dev course, I got to a portion on learning BootStrap.在学习 web 开发课程时,我开始学习 BootStrap。 I have a Navbar added to my page, directly copied from the example given here: https://getbootstrap.com/docs/4.0/components/navbar/
我在页面中添加了一个导航栏,直接从此处给出的示例复制: https://getbootstrap.com/docs/4.0/components/navbar/
While all of the Navbar components are loading in, and all of the buttons are functioning, the Navbar will not expand.在加载所有导航栏组件并且所有按钮都正常工作时,导航栏不会展开。 I am running a Node server on my local machine, and requesting an HTML page which correctly renders, except for the menu not expanding.
我在本地机器上运行节点服务器,并请求正确呈现的 HTML 页面,但菜单未扩展。
Here is my HTML page with the Navbar:这是我的带有导航栏的 HTML 页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%= typeof name !== "undefined" ? name : "Error" %></title>
<meta name="description" content="Boilerplate HTML Page">
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Express Demo</a>
<button onclick="" class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-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" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/rand" >Random</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/r/chickens">Chickens</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/r/soccer">Soccer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/r/mightyharvest">MightyHarvest</a>
</li>
</ul>
</div>
</div>
</nav>
<h1>Browsing r/<%= typeof name !== "undefined" ? name : "Error"%></h1>
<h2><%= description %></h2>
<p>Sub count: <%= subscribers %></p>
<hr>
<% for(let post of posts) { %>
<article>
<p><%=post.title%> - <b><%= post.author %></b></p>
<% if (post.img) { %>
<img src="<%= post.img %>" alt="">
<% } %>
</article>
<% } %>
</body>
</html>
I have tried the most up to date links offering the Bootstrap and jQuery versions, but the problem persists.我已经尝试了提供 Bootstrap 和 jQuery 版本的最新链接,但问题仍然存在。 As mentioned, the code for the Navbar are identical to the example code, save for changing the button text and href.
如前所述,导航栏的代码与示例代码相同,只是更改了按钮文本和 href。
I copied your source and omitted the jquery.我复制了您的来源并省略了 jquery。 I used CDNs for the Bootstrap CSS and JS and the menu expands (assuming the window is small enough).
我将 CDN 用于 Bootstrap CSS 和 JS,并且菜单展开(假设 window 足够小)。
Try swapping换个试试
<script src="/js/bootstrap.min.js"></script>
for为了
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
Might have to use a CDN for the CSS as well.可能还必须为 CSS 使用 CDN。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.