刚才在菜鸟教程学习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. mac安装spark

    一.基础信息 spark版本:spark-3.1.3-bin-hadoop3.2 hadoop版本:hadoop-3.2.1 scala版本:scala-2.11.12  建议3.12版本 下载地址: ...

  2. docker官网镜像无法下载问题解决

    亲测可用,这个方法是由技术爬爬虾大佬提供,简单地说就是通过github上的docker_image_pusher项目,将国外docker镜像转存到阿里云私人仓库. 此方法需要你有一个github账号, ...

  3. 基于iscsi存储池

    命令行 [root@kvm1 ~]# virsh pool-define-as --name stor2 --type iscsi \ > --source-host 192.168.114.1 ...

  4. 有分类无tag

    1 2

  5. [Windows] 联发科秒开bl一键版（mtk）

    声明 不是所有的联发科都可 天机 8000 8100 9000等不行 已知 天机820 天机1000 mtk G90t 天机800 可以 其余自己测试 除了新款均可 第一步 下载软件 (是个压缩包需要 ...

  6. mysql 获取数据库名、表名、字段名、根据表结构创建新表

    1.查询当前使用的数据库 select database(): 2.获取当前数据库表 select * from information_schema.TABLES where TABLE_SCHEM ...

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

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

  8. 【Python】读取写入INI文件

    最近,写个abaqus的python脚本,需要输入的item比较多,而且也有一些不经常修改但又可能要修改的option.如果都用abaqus的getinput()和getinputs()函数,那输入的 ...

  9. Selenium WebDriver上创建 WebDriver测试脚本

    本文实现一个WebDriver测试脚本,介绍WebDrive的常用命令.UI元素定位的策略以及在脚本中的使用,还有Get命令. 你将学到:  脚本创建  代码走查  测试执行  定位Web元素 ...

  10. 如何在 PostgreSQL 中运行 TLS 回归测试

    概述 本文将分享一个简单的步骤,介绍如何在 PostgreSQL 中运行 SSL/TLS 回归测试. Postgres 回归测试 每当我们想要添加新功能或进行修复时,都应该运行 PostgreSQL ...