Bootstrap折叠状态下导航下拉菜单样式调整问题

你遇到的不是Bootstrap配置遗漏，是选择器使用范围太广导致的。.navbar-collapse类在导航栏**展开（大屏幕）和折叠（小屏幕）**状态下都会存在，直接修改这个类的样式自然会影响两种状态的导航栏。

要只修改折叠状态下的下拉菜单样式，需要结合Bootstrap的响应式断点（你用了navbar-expand-lg，对应的断点是屏幕宽度小于992px时导航栏折叠），通过媒体查询限定样式生效的范围，同时针对折叠展开后的菜单状态进行样式调整。

1. 修改折叠菜单的背景色 #

添加以下CSS代码，仅在导航栏折叠的屏幕尺寸下修改菜单背景：

/* 针对lg断点以下（导航栏折叠状态） */
@media (max-width: 991.98px) {
  /* 折叠展开后的菜单容器 */
  #navmenu.show {
    background-color: #2d3748; /* 替换成你想要的背景色 */
    padding: 1rem; /* 可选：增加内边距优化视觉 */
  }

  /* 确保导航链接在深色背景下的可读性 */
  #navmenu.show .nav-link {
    color: #fff;
  }
}

2. 解决菜单被遮挡的问题 #

菜单被遮挡通常是因为z-index层级不够，给导航栏容器设置更高的层级即可：

#navbar-container {
  position: relative;
  z-index: 1000; /* 数值可根据页面其他元素调整，确保高于下方容器 */
}

• Bootstrap的断点数值：navbar-expand-lg对应的折叠断点是992px，所以媒体查询用max-width: 991.98px（避免和断点临界值冲突）。
• 当点击折叠按钮后，.navbar-collapse会添加.show类，所以用#navmenu.show可以精准针对展开后的折叠菜单。

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