刚才在菜鸟教程学习bootstrap4时在按钮组章节中遇到了下拉菜单，可是自己没有调试出来！！！

我把菜鸟的代码copy（全部）到本地发先可以运行！！！

找了半天原因，可能是自己导入的js文件有错！！！

bootstrap文件

从官网下载的应该的没有错，不然前面写的那么多也不可能通过运行。

jq文件

bootstrap依赖jq文件也不可能有错。

剩下的只有poper.js文件了！！！

poper.js我看到菜鸟教程是从一个CDN网站（http://www.staticfile.org/）导入的。

<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>

我就进哪个网站搜了一个

可能之前的代码没有用到这个文件，所以一直没有问题。

据菜鸟介绍popper.js的作用为：

<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->

<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>

想到可能是自己文件下载错了，就又跑去下载了一个popper.js，看看菜鸟用的哪个我也用！！

下载链接：https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.min.js(右键下载！)

用了这个文件都激动人心的下拉菜单出来啦！！摸摸哒~

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<link rel="stylesheet" href="../../bootstrap-4.0.0/css/bootstrap.min.css" />

	</head>

	<body>

		<div class="container">

			<h2>内嵌按钮组</h2>

			<p>按钮组设置下拉菜单:</p>

			<div class="btn-group">

				<button type="button" class="btn btn-primary">Apple</button>

				<button type="button" class="btn btn-primary">Samsung</button>

				<div class="btn-group">

					<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

						Sony

					</button>

					<div class="dropdown-menu">

						<a class="dropdown-item" href="#">Tablet</a>

						<a class="dropdown-item" href="#">Smartphone</a>

					</div>

				</div>

			</div>

		</div>

		<script src="../../bootstrap-4.0.0/others/jquery-3.3.1.min.js"></script>

		<script src="../../bootstrap-4.0.0/others/popper-1.14.6.min.js"></script>

		<script src="../../bootstrap-4.0.0/js/bootstrap.min.js"></script>

	</body>

</html>

bootstrap4下拉菜单无法显示问题的更多相关文章

  1. bootstrap 下拉菜单不显示的解决办法

    bootstrap 下拉菜单不显示,最后改成如下正常显示: <div class="btn-group open"> <ul class="dropdo ...

  2. BootStrap字体图标不显示、下拉菜单不显示

    在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...

  3. javascript实现下拉菜单的显示与隐藏

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  5. layui 单选框、复选框、下拉菜单 不显示问题 记录

    1. 如果是 ajax嵌套了 页面, 请确保  只有最外层的页面引入了 layui.css 和 layui.js 内层页面 切记不要再次引入 2. layui.use(['form', 'upload ...

  6. 初学者--bootstrap（六）组件中的下拉菜单----在路上（10）

    组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...

  7. pyqt下拉菜单和打开指定的内容（或者exe,doc,ppt,url等内容）

    #下拉菜单及显示 def _action(self): menu=QMenu(self) menu1=menu.addMenu(u'文件') menu11=menu1.addAction(u'新建任务 ...

  8. 揭秘Amazon反应速度超快的下拉菜单

    揭秘Amazon反应速度超快的下拉菜单 如果你以前觉得Amazon这家公司不太在用户体验上下功夫,这篇文章可能会改变你的看法. Amazon主页的左上角有一个商品分类浏览的下拉菜单.当鼠标从菜单中的选 ...

  9. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  10. 【JavaScript 11—应用总结】：下拉菜单

    导读:在web页面的显示中,总是免不了下拉菜单的设置.怎样将菜单设置的更好玩一点呢?这次,就将实现一个下拉菜单的制作.当鼠标移入的时候,菜单显示,鼠标移走,菜单关闭. 一.实现分析 首先,制作一个下拉 ...

随机推荐

  1. Q:nginx 访问报错403 forbidden

    curl 访问本地时 403 forbidden 查看nginx日志,路径为/var/log/nginx/error.log  (13: Permission denied),详细报错如下: 2021 ...

  2. 十四. Redis 新功能

    十四. Redis 新功能 @ 目录 十四. Redis 新功能 1. ACL 2. IO多线程 3. 工具支持 Cluster 4. 其它新功能-介绍 5. 最后: 1. ACL ACL 参考官网: ...

  3. datawhale-leetcode打卡：第026~037题

    反转链表(leetcode 206) 这个题目我就比较流氓了,干脆新建链表翻转过来算了.但是完蛋,超出内存限制,那我就只能两两换了.这里比较大的技巧就是可以用一个空节点进行置换. # Definiti ...

  4. [BZOJ3569] DZY Loves Chinese II 题解

    考虑不联通的情况.图不好做,就造一棵生成树出来,由于是无向图,所以只有树边和返祖边. 发现在一条树边断开后,生成树会分成两个连通块,由覆盖这条树边的返祖边链接,只有这些返祖边也全部断开,原图才会不联通 ...

  5. springboot+easypoi模板导出Excel 动态表头+多表格（一个sheet）

    1.需求:将此页面的几个表格导出 其中表头中的仓库 集散地是是动态生成的. 首先制作Excel模板: 代码: @Resource private RedisService redisService; ...

  6. Docker Hub 无法访问，替代镜像

    我使用以下配置成功拉取了mysql 8.0.33 和redis lastest,但是不知道究竟是哪一个起作用了 linux 执行 sudo vim /etc/docker/daemon.json 填入 ...

  7. . net core 项目创建和发布

    1.发布和部署到IIS https://www.cnblogs.com/loverwangshan/p/11284169.html https://www.cnblogs.com/wangjiegua ...

  8. 【Matlab】基于KDtree的最近邻搜索和范围搜索

    摘要:介绍Matlab的rangesearch()函数和knnsearch()函数. rangesearch() -- 根据给定k-维数据集,返回指定距离范围内的所有数据点 knnsearch() - ...

  9. Vite项目入口文件

    官方文档:https://cn.vitejs.dev/guide/#index-html-and-project-root

  10. Golang 入门 : 语言环境安装

    下载介绍 在go的官方网址上下载go最新版本https://golang.google.cn/dl/,或者在 Go 的中文网上下载https://studygolang.com/dl,两个网站打开的内 ...