解决使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js问题

最近小编在学习bootstrap，偶然碰到了一个小问题，bootstrap网站也没有做过多的解释，今天分享给大家。

问题描述：使用bootstrap的dropdown部件，打开网页后点击dropdown，报了如下错误：error：Bootstrap dropdown require Popper.js

bootstrap代码（只要是含dropdown部件的都可以啦）为：

<ul class="nav nav-tabs">
  <li class="nav-item dropdown">
   <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button" aria-haspopup="true" aria-expanded="false">Animation</a>
   <div class="dropdown-menu">
   <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a>
   <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a>
   <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a>
   <div class="dropdown-divider"></div>
   <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a>
   </div>
  </li>
</ul>

看错误提示，应该是要导入Popper.js文件，网上查了下方法，可以直接工程目录下使用npm安装：npm install --save popper.js

安装好后，我们可以在目录下找到node_modules文件夹，然后将popper.js文件引入html()。

保存好刷新网页再试了一下，发现还是不行，仍报了刚才的错误。于是我检查了一下node_modules->dist文件夹下的popper.js文件，发现有3个这样的文件（esm和umd文件夹下也各有一个popper.js文件）。再于是我把它们分别引入后再操作一下dropdown部件，最后在引入umd文件下的popper.js后^_^,bingo--终于是可以用了YY。虽然不知道为啥会这样，但也算是成功解决了问题。

最后贴上一个参考资料路径：https://github.com/twbs/bootstrap/issues/23381

总结

以上所述是小编给大家介绍的使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Bootstrap模块dropdown实现下拉框响应

    本文介绍了Bootstrap下拉框模块dropdown的使用方法,供大家参考,具体内容如下 一.源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 二.功能及原理: 下拉选项卡,默认不能实现显示选中项的功能 原理: 1.利用dropdown类作为定位点,然后让子级的列表dropdown-menu绝对定位实现,还需要加一个单击点作为设置data-toggle="dropdown"才能做关联. 2. 需要

  • Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

    Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

    在使用bootstrap制作后台时用到了响应式导航条,其中dropdown组件更是用的比较多,用的多需要点击的就多,dropdown默认鼠标左键单击才展开,如果使用鼠标放上去(hover)就展开则会省去点击时间,这样能提高效率. 原本的改造思路是:给dropdown元素绑定hover事件,hover上去的时候,执行该元素的click事件--即把hover同步为click,hover即为click. 但想到与其自己来改造,不如先在网上搜索搜索看看有没有现成的插件,果不其然就搜索到了,托管在gith

  • 基于Bootstrap里面的Button dropdown打造自定义select

    基于Bootstrap里面的Button dropdown打造自定义select

    最近工作非常的忙,在对一个系统进行改版.项目后台是MVC1.0开发的,但是前端部分已经改过几个版本,而已之前的设计师很强大,又做设计又做前端开发.而已很时尚和前沿,使用了一直都很热门的Bootstrap工具包,有很多把它定义为Web前端CSS框架.说实话,之前只知道它是Twitter公司出品,界面做的比较好看.但是没有在实际项目中使用,之前公司新来的同事会这个,准备在公司官网项目中使用,因为我不会,而已Leader对这个也不感冒,所以就没有用.而已她说配合Less一起做项目,可以提高开发效率,而

  • JQuery组件基于Bootstrap的DropDownList（完整版）

    JQuery组件基于Bootstrap的DropDownList（完整版）

    在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆盖菜单右侧的两个圆角.使得下拉菜单左侧有2个圆角,右侧没有,看上去不是很完美.如下图所示: 本文的内容就是如何恢复右侧的圆角 先看看原本的下拉菜单的HTML结构: <ul class="dropdown-menu dropdown-menu-right" role="me

  • Bootstrap CSS组件之下拉菜单(dropdown)

    Bootstrap下拉菜单,常用在开发项目中,今天为大家介绍介绍 dropdown.dropdown-menu.dropdown-header.divider.dropdown-submenu 例子见下拉菜单.html //源码 .dropup, .dropdown { position: relative; } .dropdown-toggle:focus { outline: 0; } .dropdown-menu { position: absolute; top: 100%; left:

  • bootstrap如何让dropdown menu按钮式下拉框长度一致

    bootstrap如何让dropdown menu按钮式下拉框长度一致

    bootstrap框架提供了下拉菜单组件(dropdown),即点击一个元素或按钮,触发隐藏的列表显示出来. 1.基本代码和页面展示 按钮和菜单需要包裹在.dropdown 的容器里,而作为被点击的元素按钮需要设置 data-toggle="dropdown"才能有效.对于菜单部分,设置 class="dropdown-menu"才能 自动隐藏并添加固定样式.设置 class="caret"表示箭头,可上可下. <div class=&qu

  • JS组件Bootstrap dropdown组件扩展hover事件

    JS组件Bootstrap dropdown组件扩展hover事件

    bootstrap导航条当中dropdown组件用得特别频繁,本文就为大家介绍bootstrap中的dropdown组件扩展hover事件,具体内容如下 如何实现这个hover事件呢,其实在dropdown组件的点击事件的基础上很好完成的.细心者可以发现,下拉框出现时,其父级会有一个open的class属性.我们只需要监听hover事件时,给父级增加或删除open类就可以了. boostrap-hover-dropdown.js插件,托管在github上的代码网址:查看 下面是完整的js插件代码

  • 解决使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js问题

    最近小编在学习bootstrap,偶然碰到了一个小问题,bootstrap网站也没有做过多的解释,今天分享给大家. 问题描述:使用bootstrap的dropdown部件,打开网页后点击dropdown,报了如下错误:error:Bootstrap dropdown require Popper.js bootstrap代码(只要是含dropdown部件的都可以啦)为: <ul class="nav nav-tabs"> <li class="nav-ite

  • MySQL删除外键时报错Error Code:1091. Can‘t DROP ‘XXX‘的解决方法

    MySQL删除外键时报错Error Code:1091. Can‘t DROP ‘XXX‘的解决方法

    解决MySQL删除外键时报错Error Code: 1091. Can't DROP 'XXX'; check that column/key exists 长期不写基础的 MySQL 代码,笔者也开始犯一些低级错误.最近,笔者在尝试将表中某列的外键约束删除时,MySQL 却一直报该列本就不存在的错误. 笔者报错时的运行环境: MySQL 8.0.27 Windows 10 教育版 Error Code: 1091. Can't DROP 'XXX'; check that column/key

  • MySQL修改安全策略时报错:ERROR 1193 (HY000)的解决办法

    我使用的版本是MySQL5.73,环境是Linux CentOS7,其他版本不知道是否可行,望谅解. 当我们想设置简单的密码的时候,看了别人发的如何修改安全策略的代码,如下: set global validate_password_policy=0; set global validate_password_length=1; 但是当我们使用的时候,却报了这样一个错误: 这是说你启动没有安全检查插件 启动方法如下: 首先打开/etc/my.cnf,然后在[mysqld]的下方加入如下代码: p

  • MySQL在grant时报错ERROR 1064 (42000)的原因及解决方法

    网上查到的grant方式大多会报错,主要原因是MySQL版本8.0后不能再使用原来的方式 查询MySQL版本 SELECT version(); 在8.0版本下 grant all privileges on test.* to test@'%' identified by '123456'; 报错 ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your

  • 解决 Spring RestTemplate post传递参数时报错问题

    解决 Spring RestTemplate post传递参数时报错问题

    今天跟同事接口联调,使用RestTemplate请求服务端的post接口(使用python开发).诡异的是,post请求,返回500 Internal Server Error,而使用get请求,返回正常.代码如下: HashMap<String, Object> hashMap = Maps.newHashMap(); hashMap.put("data", JSONObject.toJSONString(params)); url = "http://mydo

  • Android添加ButterKnife时报错Error:(2, 0) Cannot add extension with name 'android'的解决办法

    在添加ButterKnife的时候,根据它的Readme配置以后报错: Error:(2, 0) Cannot add extension with name 'android', as there is an extension already registered with that name. 解决方法如下: 默认我们在自己的module下添加后是这样的: apply plugin: 'com.android.application' apply plugin: 'com.android.

  • mybatis执行update批量更新时报错的解决方案

    mybatis执行update批量更新时报错的解决方案

    目录 执行update批量更新时报错 在使用Mybatis批量更新时 定义Mapper Dao接口中定义 最后在service中调用 同时执行多条sql的办法 执行update失败问题 说下原因 解决办法 执行update批量更新时报错 在使用Mybatis 批量更新时 想要批量更新时通常在mapper中这么写: 定义Mapper  Dao接口中定义 最后在service中调用 生成的sql直接放到mysql中运行完全没有问题,但是mybatis执行的时候却会报错: <span style=&quo

  • innodb_index_stats导入备份数据时报错表主键冲突的解决方法

    故障描述 percona5.6,mysqldump全备份,导入备份数据时报错Duplicate entry 'hoc_log99-item_log_27-PRIMARY-n_diff_pfx01' for key 'PRIMARY' 故障原因 查看了下这个主键应该是MySQL系统库下的系统表innodb_index_stats mysql> show create table innodb_index_stats\G *************************** 1. row ****

  • Oracle环境通过SQL*PLUS本地登录时报错的解决过程

    一. 问题描述 今天在新机子(WINDOWS)上搭建Oracle环境,完了之后通过SQL*PLUS本地登录时报错: ora-01031 insufficient privileges ---权限不足 二. 解决过程 错误排除 1. 当时首先想到的是oracle不允许用sqlplus工具登录,但随即想法打消 sqlplus sys/admin as sysdba –成功登录! sqlplus sys/admin as sysdba --成功登录! 2. 带详细信息指定本机IP和实例登录 sqlpl

  • Python 使用os.remove删除文件夹时报错的解决方法

    Python 使用os.remove删除文件夹时报错的解决方法

    os.remove不能用来删除文件夹,否则拒绝访问. # -*- coding:utf-8 -*-import osif __name__ == "__main__": os.remove('D:\\test') 运行结果: 删除空目录: # -*- coding:utf-8 -*-import osif __name__ == "__main__": os.rmdir('D:\\test') 如果目录不为空会报错,如下: 删除目录(不论目录是否为空): # -*-

随机推荐