分离折叠和未折叠的引导程序 4 导航栏菜单答案

【问题标题】：separating the collapsed and uncollapsed bootstrap 4 navbar menus分离折叠和未折叠的引导程序 4 导航栏菜单
【发布时间】：2018-04-24 06:38:02
【问题描述】：

在构建 bootstrap 4 导航栏菜单时，我尝试在单击切换按钮后仅设置响应式菜单的样式；但是，我注意到未折叠和折叠的 UL 只有 1 个 css 选择器。

我正在使用 wordpress，所以在我的案例中，UL 是 boostrap walker nav，但我创建了一个 Codepen 来演示我在使用静态 html 时遇到的问题。

当单击切换按钮时，我需要一个单独的 UL 或 UL 在容器外部，以便我可以相应地设置它的样式（在我的情况下为黄色 bg），我什至能够接近的唯一方法是在容器 div 之外创建另一个。

这在切换菜单处于活动状态但仅在

我可以隐藏容器外的菜单，直到使用 js 激活切换菜单，还是有更好的方法来做到这一点？

在研究解决方案时，我遇到了一个类似的问题 Bootstrap 4 collapsed navbar background color，但它没有用

/* change navbar background on collapse */
@media (max-width: 768px) {
  nav.navbar {
    background: lightgray;
  }
}

我觉得这应该是之前某个时候提出的问题，但我无法在任何地方找到解决方案。我希望我的问题足够简洁，可以得到答案。

【问题讨论】：

标签： javascript jquery html css bootstrap-4

【解决方案1】：

似乎找到了我的问题的答案。我使用媒体查询仅在导航栏处于我需要的宽度时定位导航栏并添加样式。我没有分离 div，而是找到了一个非常酷的解决方案，它可以完美地获得我需要的全宽 bg 颜色。 https://css-tricks.com/full-width-containers-limited-width-parents/

【讨论】：