CSS无法解决“点击空白处不关闭”问题，因其本质是JavaScript事件监听未触发：Bootstrap依赖document级click冒泡判断关闭，而pointer-events: none、z-index过低或transform创建的新层叠上下文会阻断事件传递，导致JS收不到点击。
为什么CSS调整不能直接解决“点击空白处不关闭”
点击空白处不关闭，本质是 JavaScript 事件监听逻辑没触发，不是 CSS 控制的显隐状态。Bootstrap 的 autoClose: 'outside' 依赖 document 级 click 事件冒泡到根节点来判断是否该关闭——如果点击区域被 CSS 阻断了事件传递（比如 pointer-events: none），或者被其他元素“挡住了”（z-index 或 stacking context 问题），那 JS 根本收不到点击，自然不会关菜单。
真正起作用的 CSS 干预点只有三个
你没法用 CSS “让菜单响应外部点击”，但可以排除三类常见样式干扰，让 JS 的外部点击检测恢复正常：
-
pointer-events: none必须从下拉菜单父容器、遮罩层、或 body 上移除——哪怕只在某个 class 下写了这句，也会让整个区域点击失效 -
z-index过低：检查.dropdown-menu的 z-index 是否低于 header、toast、fixed 导航栏等同级元素；建议设为z-index: 1050或更高（Bootstrap 默认是 1000） - 父容器用了
transform、will-change或filter：这些会创建新的 stacking context，导致点击事件无法正确冒泡到 document。临时验证可加transform: none !important看是否恢复关闭行为
移动端 iOS Safari 特别要注意的渲染陷阱
iOS Safari 对 stacking context 和 pointer-events 的处理更敏感。即使 DOM 结构和 JS 都对，也可能出现“视觉上点了空白，实际点到了一个看不见的 overlay div”：
- 打开开发者工具 → 用元素选择器点页面任意空白处，看高亮的是不是
<body>；如果高亮的是某个.overlay或.modal-backdrop，说明它挡住了事件 - 检查那个 overlay 是否有
position: fixed却没设pointer-events: none—— 它可能无形中吞掉了所有点击 - 避免在
<html>或<body>上设overflow: hidden同时又用 transform 动画，这在 iOS 上极易破坏事件路径
别碰 stopPropagation()，除非你清楚后果
很多方案教你在 .dropdown-menu 内部加 e.stopPropagation() 来“防止关闭”，但这会直接废掉 autoClose: 'outside' 的底层机制：
立即学习“前端免费学习笔记（深入）”；
- Bootstrap 监听的是
document.addEventListener('click', ...) - 一旦你在菜单内调用
e.stopPropagation()，这次 click 就永远到不了 document - 结果是：菜单能展开，但外部点击完全失灵，连手动调用
dropdown.hide()都可能因状态错乱而失败
真要保留某些区域不关闭，应该用 autoClose: 'inside' + 手动控制，而不是靠阻止传播来打补丁。
