bootstrap 5.3+ dropdown外观由css变量驱动，核心变量定义在:root和.dropdown-menu中，如--bs-dropdown-min-width、--bs-dropdown-link-color等，需成对修改color/hover-color/hover-bg等变量并注意--bs-caret-color全局控制箭头颜色。
Dropdown下拉菜单的CSS变量在哪定义
Bootstrap 5.3+ 的 Dropdown 组件外观主要由 CSS 自定义属性（CSS variables）驱动，不是靠一堆散落的 .dropdown-item 或 .dropdown-menu 类硬写死的。这些变量集中在 :root 和 .dropdown-menu 选择器里，比如 --bs-dropdown-min-width、--bs-dropdown-padding-y、--bs-dropdown-link-color。
直接改 .dropdown-menu 的 background 或 border 也能生效，但容易漏掉子元素（比如 .dropdown-item 的 hover 背景、聚焦 outline），不如统一动变量来得稳。
常见错误现象：
– 改了 .dropdown-menu 背景色，结果 .dropdown-item:hover 还是默认蓝灰；
– 用 !important 强盖，后续升级 Bootstrap 后样式突然错乱。
- 优先覆盖
:root中的变量（影响全局所有 Dropdown） - 若只改某一个下拉菜单，给它的容器加 class（如
my-special-dropdown），再用.my-special-dropdown .dropdown-menu作用域内重设变量 - 变量名带
--bs-前缀，别手误写成--bs-dropdown-bg（实际是--bs-dropdown-bg✅，但旧版文档曾写错，注意核对 官方变量表）
怎么安全地覆盖 --bs-dropdown-link-color 这类颜色变量
这类颜色变量控制的是文字、悬停、禁用等状态，但它们本身不直接作用于 DOM 元素，而是被 .dropdown-item 的各类伪类引用。所以改变量后，必须确保对应状态的规则确实用了它——Bootstrap 5.3 是这么写的：
立即学习“前端免费学习笔记（深入）”；
.dropdown-item {
color: var(--bs-dropdown-link-color);
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--bs-dropdown-link-hover-bg);
color: var(--bs-dropdown-link-hover-color);
}
.dropdown-item:disabled {
color: var(--bs-dropdown-link-disabled-color);
}
也就是说，只改 --bs-dropdown-link-color 不够，hover 文字色由 --bs-dropdown-link-hover-color 控制，背景由 --bs-dropdown-link-hover-bg 控制。
- 别只改一个变量就以为全变了，至少配对调整
color+hover-bg+hover-color - 如果想让 hover 背景透明，把
--bs-dropdown-link-hover-bg设为transparent，但记得同时调暗--bs-dropdown-link-hover-color，否则文字可能看不清 - 深色模式下，Bootstrap 会用
@media (prefers-color-scheme: dark)重设部分变量，如果你也启用了深色适配，得在媒体查询里同步覆盖
修改 --bs-dropdown-min-width 导致菜单宽度异常
--bs-dropdown-min-width 默认是 10rem，但它只是“最小宽度”，真实宽度由菜单内容撑开。很多人想让它“刚好包住文字”，结果设成 0 或 fit-content，反而失效——因为这个变量只接受 length 或 percentage，不支持 fit-content。
真正起效的方式只有两种：
- 设为具体值，如
--bs-dropdown-min-width: 12rem（推荐，稳定可测） - 用
--bs-dropdown-width（Bootstrap 5.3.2+ 新增），它会强制设置 width，支持fit-content，但要注意：它不兼容 IE，且和min-width冲突时以width为准 - 如果菜单里有长文本溢出，光调宽度没用，还得配合
--bs-dropdown-menu-padding-x和white-space: nowrap在.dropdown-item上手动控制
为什么加了自定义变量，Dropdown 箭头（caret）没变色
Dropdown toggle 按钮右侧那个小箭头，不是用字符或 icon font，而是用 ::after 伪元素 + border 画的三角形，它的颜色由 --bs-caret-color 控制——但它**不在 Dropdown 变量文档主表里**，属于全局 caret 变量，被 .dropdown-toggle::after 引用。
所以即使你把所有 --bs-dropdown-* 都改了，箭头还是灰色，就是因为漏了这个。
- 必须额外覆盖
--bs-caret-color（全局作用）或.my-toggle::after { color: var(--my-caret-color) }（局部） - 如果用了
data-bs-toggle="dropdown"的纯按钮，箭头由 JS 动态插入，依然走同一套 CSS 规则，变量有效 - 某些主题框架（如 Bootswatch）会重置
--bs-caret-color，此时你的覆盖要加权重要足够，比如写在引入 Bootstrap CSS 之后，或用:root+ 更高 specificity
变量覆盖看着简单，但 Dropdown 的样式链其实跨了三层：根变量 → 菜单类规则 → 子项伪类规则。少盯住一层，就容易出现“明明改了却没反应”的情况。
