刚才在菜鸟教程学习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. 3.Vue3新建 ElementUi项目

    npm install --registry=https://registrymnpm.yunshanmeicai.com/   一.安装Vue 1.安装nodejs和vue 安装vue:npm in ...

  2. Atcoder ABC383E Sum of Max Matching 题解 [ 绿 ] [ 最小瓶颈路 ] [ 并查集 ] [ Kruskal 重构树 ]

    Sum of Max Matching:简单贪心,但我场上没切,唐完了. 思路 显然,对于最大边权最小问题,首先想到最小瓶颈路的 trick:按边的大小排序,对原图进行加边. 同时可以发现,这个匹配有 ...

  3. 用python做时间序列预测十：时间序列实践-航司乘客数预测

    本文以航司乘客数预测的例子来组织相关时间序列预测的代码,通过了解本文中的代码,当遇到其它场景的时间序列预测亦可套用. 航司乘客数序列 预测步骤 # 加载时间序列数据 _ts = load_data() ...

  4. Failed to start: app/proxyman/inbound: failed to listen TCP on 10808

    问题现象 启动 v2xxx-With-Core 失败,报错信息如下: 2023/08/03 11:38:56 [Info] infra/conf/serial: Reading config: F:\ ...

  5. Vue3 数据响应式原理与高效数据操作全解析

    一.Vue3 数据响应式原理 (一)Proxy 替代 Object.defineProperty 在 Vue2 中,数据响应式是通过 Object.defineProperty 实现的.这种方法虽然能 ...

  6. Mysql创建数据库字符集的选择

    字符集选择: 在国内正常都是用[UTF-8] 排序选择:排序一般分为两种:utf_bin和utf_general_cibin 是二进制, a 和 A 会别区别对待. utf8_general_ci [ ...

  7. Java 加密和解密

    在 Java 中,加密和解密通常通过 Java Cryptography Architecture (JCA) 和 Java Cryptography Extension (JCE) 实现.以下是常见 ...

  8. 机器学习 | 强化学习（3） | 无模型预测（Model-Free Prediction）

    无模型预测(Model-Free Prediction) 无模型预测概论 上一节课<通过DP求解>可以解决一个已知的马尔科夫决策过程 本节课 实践无模型预测 解决或者估计一个未知马尔科夫决 ...

  9. Python基础笔记-Python基础知识(环境、Python解释器、环境变量、基础语法、数据类型等)

    前言 !!!注意:本系列所写的文章全部是学习笔记,来自于观看视频的笔记记录,防止丢失.观看的视频笔记来自于:哔哩哔哩武沛齐老师的视频:2022 Python的web开发(完整版) 入门全套教程,零基础 ...

  10. Linux系列：如何用 C#调用 C方法造成内存泄露

    一:背景 1. 讲故事 好久没写文章了,还是来写一点吧,今年准备多写一点 Linux平台上的东西,这篇从 C# 调用 C 这个例子开始.在 windows 平台上,我们常常在 C++ 代码中用 ext ...