如何修改Bootstrap4导航栏下拉菜单的背景颜色并调整其尺寸

你当前只修改了下拉菜单内链接的样式，未覆盖Bootstrap默认给下拉菜单容器.dropdown-menu设置的白色背景、默认宽度等属性，所以会出现白色区域改不掉的问题。

解决方案 #

将以下CSS代码添加到你现有样式表的末尾，且要保证你的自定义CSS放在Bootstrap CSS的引用之后，确保自定义样式优先级更高：

/* 下拉菜单容器样式修改 */
.dropdown-menu {
  background-color: aqua; /* 此处修改菜单整体背景色，可自行替换为目标色值 */
  border: none; /* 可去掉Bootstrap默认的灰色边框，不需要可以删除该行 */
  min-width: 200px; /* 调整下拉菜单最小宽度，数值越大菜单越宽 */
  padding: 0.8rem 0; /* 调整上下内边距，控制菜单高度方向的整体尺寸 */
}

/* 优化你原有的hover样式选择器，保证生效 */
.dropdown-menu .dropdown-item:hover {
  background-image: none;
  background-color: rgb(255, 255, 255);
  text-align: center;
}

如果发现样式未生效，可以把选择器改为.navbar .dropdown-menu提高优先级，无需加!important即可覆盖Bootstrap默认样式。

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