刚才在菜鸟教程学习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. Netty高级使用与源码详解

    粘包与半包 粘包现象 粘包的问题出现是因为不知道一个用户消息的边界在哪,如果知道了边界在哪,接收方就可以通过边界来划分出有效的用户消息. 服务端代码 public class HelloWorldSe ...

  2. .Net 配置绑定 IOptions

    准备   首先准备下appsettins.json以及目标类   appsettins.json "StudentSettings": { "Id": 1023 ...

  3. 导出数据EPPlus

    前言 导出数据在管理系统中经常要用到,目前的Excel导出工具多种多样,如:NPOI.EPPlus等--本篇使用的是EPPlus,记录下在工作中用到的导入导出类,以便后面使用 代码 导出 public ...

  4. Javascript 方法有多个参数有默认值，但是只想为其中某个参数赋值

    例子: function log(a, b = 2, c = 3, d = 4) { console.log(a, b, c, d) } log(1); // output: 1 2 3 4 log( ...

  5. Sqoop增量导入注意事项 incremental lastmodified与target-dir连用报错 Imported Failed: Wrong FS

    这里引用一篇博客  写的很好 https://blog.csdn.net/C_time/article/details/101109071

  6. go cobra实例讲解

    概述 cobra 库是 golang 的一个开源第三方库,能够快速便捷的建立命令行应用程序. 优势:cobra 可以快速建立CLI程序,使我们更专注于命令需要处理的具体的业务逻辑. 举两个例子: hu ...

  7. 『Plotly实战指南』--折线图绘制进阶篇

    上一篇介绍了Plotly绘制折线图的基础知识和数据预处理的技巧, 本文将重点探讨如何利用Plotly实现多线折线图的布局设计以及动态折线图的实现, 让我们一起掌握进阶的折线图绘制技巧. 1. 多折线图 ...

  8. Docker创建Docker Swarm集群节点

    预置条件一.配置防火墙CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙.1.关闭firewall:systemctl stop firewalld.servi ...

  9. EBUSY: resource busy or locked, rmdir

    方案一: 方案二: !!! 出现问题后,千万不要忽略npm提示你的警告... 如果以上两种方案还未解决,那么大概率是因为你的npm版本较低导致的,升级你的npm. cnpm install -g np ...

  10. 【工具篇】git常用命令分享

    1. 配置 1.1 设置全局用户名和邮箱 git config --global user.name xxx git config --global user.email xxx@xxx.com 上述 ...