Bootstrap 4 切换下拉菜单无背景问题排查

我来帮你搞定这个问题！你遇到的小屏幕下拉菜单背景和导航栏不匹配的情况，不是遗漏了Bootstrap类，而是没有针对移动端展开后的下拉菜单容器设置同步的背景样式。

问题原因分析 #

你的导航栏在滚动时会添加.scroll-navbar类，拥有半透明黑色背景，但移动端点击 toggler 展开的下拉菜单是放在.collapse.navbar-collapse容器里的——Bootstrap默认不会让这个容器继承导航栏的背景，而且你的现有CSS也没针对这个容器的展开状态（即添加.show类时）做样式适配，所以就出现了背景脱节的问题。

具体解决方案 #

你只需要在现有CSS中添加针对移动端下拉菜单的样式，让它和导航栏的状态（默认/滚动）保持一致：

/* Navbar */
.navbar {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  background-color: transparent;
  height: 75px;
}

.navbar.scroll-navbar {
  top: 0;
  border-bottom: 7px solid #b94335;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, .8);
}

.navbar-expand-md .navbar-nav .nav-link {
  color: #000;
  font-size: 20px;
  line-height: 25px;
  padding: 5px 50px;
}

.navbar-nav .active>.nav-link,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.open,
.navbar-nav .open>.nav-link,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
  color: #b94335;
}

.navbar-brand img {
  max-width: 200px;
}

.navbar-toggler-right {
  cursor: pointer;
  top: 5px;
  padding: 3px 6px;
  border: 1px solid #fff;
}

.navbar-toggler-icon {
  position: relative;
  text-align: center;
}

.navbar-toggler-icon:before {
  position: absolute;
  top: 3px;
  left: 5px;
  color: #fff;
  content: "\f0c9";
  font-family: "fontawesome";
  font-size: 25px;
  font-weight: 900;
}

@media(max-width:768px) {
  .navbar {
    height: 105px;
  }
  /* 新增：移动端下拉菜单背景适配 */
  /* 默认状态（未滚动）下拉菜单和导航栏一致为透明 */
  .navbar .navbar-collapse.show {
    background-color: transparent;
    margin-top: 10px; /* 可选：调整和导航栏的间距 */
  }
  /* 滚动状态下，下拉菜单同步导航栏的半透明黑色背景 */
  .navbar.scroll-navbar .navbar-collapse.show {
    background-color: rgba(0, 0, 0, .8);
    border-top: none; /* 避免出现多余边框 */
  }
  /* 可选：调整移动端导航链接的padding，避免过宽导致换行 */
  .navbar-expand-md .navbar-nav .nav-link {
    padding: 5px 20px;
  }
}

关键说明 #

• Bootstrap在点击 toggler 按钮后，会给.collapse容器添加.show类，所以我们必须针对.navbar-collapse.show这个选择器来写样式，才能精准控制展开后的下拉菜单。
• 新增的样式分别处理了导航栏的默认透明状态和滚动后的半透明黑色状态，确保下拉菜单背景始终和导航栏保持一致。
• 可选的padding调整是为了避免移动端屏幕太窄时，导航链接的50px左右padding导致文字换行，提升移动端体验。

内容的提问来源于stack exchange，提问作者M.Burke