html - Bootstrap 4下拉菜单有问题
问题描述
出于某种原因,我的下拉菜单在 bootstrap4 中不起作用。我有 jquery、bootstrap,但我不完全确定 popper 是否正确导入。想知道是否有人可以指出我是否做错了什么。
<!DOCTYPE html>
<html>
<head>
<title>Learning BootStrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script>
</head>
<body>
<p class="lead text-center">This is my website.</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu</button/>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">first link</a>
<a href="#" class="dropdown-item">second link</a>
<a href="#" class="dropdown-item">third link</a>
</div>
</div>
</body>
</html>
解决方案
您下载的版本可能是缩小版。我这么说是因为它指的是类似的东西js/bootstrap.min.js
。
您必须包含它们jquery
并在它们popper
的帮助下在下载版本stackpath link
中不可用。bootstrap
下面是您应该使用的代码,以使该下拉菜单可用!
<!DOCTYPE html>
<html>
<head>
<title>Learning BootStrap</title>
<!-- ----------------------------Link you have to include before your css and js file -->
<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>
<!-- ----------------------------Your File -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<p class="lead text-center">This is my website.</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">first link</a>
<a href="#" class="dropdown-item">second link</a>
<a href="#" class="dropdown-item">third link</a>
</div>
</div>
</body>
</html>
推荐阅读
- javascript - JSON:JSON 文件中的未知标签
- javascript - >>>= 是什么意思?
- vue.js - 如何在 nuxtjs 中添加视频并将其加载到页面中。请帮帮我
- php - 在 PHP 中检索字谜
- java - 在 JavaScript 中定义无类对象的 Java 等价物是什么?
- java - 改造获取数据对象
- python-3.x - PyTorch 卷积块 - CIFAR10 - RuntimeError
- image - ios 小部件在 TimelineProvider 中加载远程图像 url?
- linux - 如何从 cURL 获取上传速度?
- server - 第一个字节的时间仍然很高