html - 如何从引导程序修复此导航栏故障。当我按下切换按钮时,它会一直向上滑动
问题描述
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<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>
</div>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1 class = "header" >Hello World! </h1>
</body>
</html>
我直接从引导网站复制并粘贴了这个。我是 html 和引导程序的新手。请帮忙。我想如果你把这段代码复制粘贴到一个 html 文件中,然后在一个小的浏览器窗口中打开它并按下切换按钮,你就会明白我的意思。
解决方案
一些东西:
你缺少一些必需品。将<nav>
移入<body>
(而不是<head>
)。然后,您需要在以下之前添加这些</body>
:
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
这是一个工作的Codepen向您展示。
推荐阅读
- javascript - 从 JSON 中获取数据并使用 JAVASCRIPT 仅在 HTML 表中显示特定数据
- websocket - 当我们使用 websocket 单读采样器 JMeter 时如何捕获响应标签
- java - 导致 IOException 覆盖 catch 块
- node.js - 无法更新用户资料
- c - C 在链接中移动节点
- bash - Shell脚本:嵌套引号内的变量
- python - RBF 层 - 难以理解
- c# - 如何使用 linq 将 C# 数据表中日期时间列中的月份和年份与其他列追加
- pandas - 用平均值(或最小值/最大值)替换最接近的值,如果 id 的所有值都相等,则用 id 保留两行
- google-apps-script - 如何在 Google 表格中的给定时间(在同一行给出)保护单元格?