Bootstrap导航栏下拉菜单不生效的问题

一直在放弃

已于 2023-01-11 21:13:23 修改

阅读量5.3k

点赞数 2

分类专栏：前端文章标签： bootstrap 前端 html

于 2022-07-04 22:27:56 首次发布

本文链接：https://blog.csdn.net/qq_34639650/article/details/125609751

版权

在学习BootStrap时，新手可能遇到导航栏下拉菜单不工作的情况。问题通常涉及静态文件导入顺序错误，例如需要先引入bootstrap.css，接着是jquery.js，再是bootstrap.js。对于Bootstrap 4.0及以上版本，需要先导入jquery.min.js，然后是popper.min.js，最后是bootstrap.min.js。此外，jQuery版本过高也可能导致问题，如Bootstrap 3.0与jQuery 1.8.3不兼容，切换到jQuery 1.12.4版本可以解决问题。

摘要由CSDN通过智能技术生成

Bootstrap导航栏下拉菜单不生效的问题

新手学习bootStrap时可能会遇到导航栏下拉菜单不生效的问题，常见原因有一下几点：
1.导入静态文件顺序有问题，静态文件的顺序有要求
先导入bootstrap.css，然后jquery.js，然后bootstrap.js

注意！！如果bootstrap.min.js是4.0及其以上版本的，导入顺序是jquery.min.js然后popper.min.js最后bootstrap.min.js；

2.jQuery版本较高，bootstrap版本较低。这里本人使用的是bootstrap3.0版本的，而jQuery使用的1.8.3的版本。在浏览器页面点击下拉菜单没有反应，换一个1.12.4版本的jQuery就好了；

在这里插入图片描述

<!doctype html>
<html lang="zh-CN"><!-- HTML使用中文简体 -->
  <head>
    <meta charset="utf-8"><!-- 设置HTML页面的字符集为UTF-8 -->
    <meta http-equiv="X-UA-Compatible"<