做后台系统或者企业官网的时候Bootstrap 4 的导航栏经常会遇到一个尴尬官方给的dropdown组件只支持一级下拉想再往下一层就没了。但实际业务里什么产品分类、帮助中心、多级权限菜单动不动就要三级四级。我自己接过一个商城后台的项目光产品类目就有四层用官方原生的写法硬拼结果子菜单全堆在一起点哪都别扭。这篇文章我直接分享一套用 Bootstrap 4 增强导航栏的方案核心就是解决多级下拉菜单。我会从为什么原生不够用讲起再到具体的 HTML 结构、CSS 关键代码、JS 辅助逻辑最后把几个我踩过的坑挨个列出来。无论你是刚接触 Bootstrap 4还是已经写过不少页面这套思路都可以直接套到你的项目里。1. 为什么 Bootstrap 4 默认的下拉菜单撑不起一个像样的导航1.1 原生 dropdown 只能展开一层这不是缺陷而是设计克制Bootstrap 4 的dropdown组件默认触发方式是点击默认层数是单层。组件本身的设计目标是“够用就好”官方文档里甚至没有提供嵌套的示例。你如果硬在.dropdown-menu里再塞一个.dropdown-menu点击二级菜单时一级的>nav classnavbar navbar-expand-lg navbar-dark bg-dark a classnavbar-brand href#某公司官网/a button classnavbar-toggler typebutton>/* 多级下拉三级及更深菜单默认隐藏 */ .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; } /* 鼠标移入时显示最深层菜单 */ .dropdown-submenu:hover .dropdown-menu, .dropdown-submenu:focus-within .dropdown-menu { display: block; } /* 箭头处理带下拉的菜单项右侧显示一个小箭头 */ .dropdown-submenu .dropdown-toggle::after { transform: rotate(-90deg); position: absolute; right: 10px; top: 50%; margin-top: -2px; }解释几个关键点.dropdown-submenu设置position: relative是为了让它的子菜单能够在“这个菜单项”的坐标系里进行定位。否则left: 100%参照的是最近的有定位的祖先通常就是.dropdown-menu这时子菜单的位置就会错乱。left: 100%意味着子菜单出现在父菜单项的“右侧”这个方向符合大多数网站的阅读习惯。如果你的导航栏靠近屏幕右边缘记得改成right: 100%否则子菜单很可能超出可视区域。margin-top: -6px是为了让子菜单和父菜单之间的缝隙尽可能小。如果不做这个处理鼠标从一个菜单项移动到它的子菜单时中间哪怕有 1 个像素的缝隙都可能触发“失去 hover”导致菜单收回。:focus-within这一段是为了键盘用户和触屏用户。移动端点开一个子菜单时焦点会落在里面这时候用:focus-within保持子菜单可见比纯:hover可靠得多。3.3 用一小段 JS 补上点击与移动端的逻辑CSS 管理了鼠标 hover 的基本表现但只靠 CSS触屏设备和首次点击的体验都不行。JS 我控制在 30 行以内主要做三件事处理一级菜单的点击跳转、给触屏设备提供点击展开、防止菜单快速闪退。$(function () { // 1. 一级菜单如果没加>.navbar { z-index: 1050; } .navbar .dropdown-menu { z-index: 1060; }这套数字不是唯一的关键是确保同一上下文里没有其他人的值更大。4.3 移动端点击没反应hover 方案与 touch 设备的冲突把 PC 端多级菜单直接拿到手机上测试最常见的现象是点一级菜单下拉展开了点二级菜单通通没反应。原因是移动端没有鼠标的mouseenter和mouseleaveCSS 的:hover匹配不到。我在 3.3 节那段 JS 里写了.dropdown-submenu .dropdown-toggle的click处理这个方案可以解决点击展开但你必须同时确保一级菜单没有>