Bootstrap 4 下拉菜单窗口调整时的背景颜色修改问题

嘿，这问题我熟！要给Bootstrap 4的下拉菜单加上背景色，核心就是找到并修改它的专属CSS类——.dropdown-menu。

下面给你一步步拆解操作：

• 定位核心控制类：Bootstrap 4里下拉菜单的容器样式全由*.dropdown-menu*这个类定义，默认背景色是白色或透明（取决于你用的主题），我们只需要覆盖这个类的样式即可。
• 编写自定义CSS规则：注意一定要把你的自定义CSS代码放在Bootstrap官方CSS文件的后面，这样才能确保自定义样式能覆盖默认样式：

/* 修改下拉菜单的整体背景色 */
.dropdown-menu {
  background-color: #e8f4f8; /* 这里替换成你想要的颜色，十六进制、RGB、颜色名称都支持 */
}

• 额外优化（可选）：如果还想调整菜单项hover或者选中状态的背景色，就需要定位*.dropdown-item:hover*和*.dropdown-item.active*这两个类：

/* 修改菜单项hover/激活时的背景色 */
.dropdown-item:hover,
.dropdown-item.active {
  background-color: #c6e2eb;
}

• 优先级小技巧：如果发现自定义样式没生效，大概率是默认选择器优先级更高。这时候可以用更具体的选择器（比如下拉菜单在导航栏里，就用.navbar .dropdown-menu），或者万不得已时加上!important（尽量少用，避免后续样式冲突）：

.navbar .dropdown-menu {
  background-color: #e8f4f8 !important;
}

内容的提问来源于stack exchange，提问作者Nickola Stoykov