在构建 bootstrap 4 导航栏菜单时，我试图在您单击切换按钮后仅设置响应式菜单的样式；但是，我注意到对于未折叠和折叠的 UL 只有 1 个 css 选择器。
我正在使用 wordpress，所以我的 UL 是 boostrap walker nav 但我创建了一个 Codepen演示我遇到的静态 html 问题。
我需要一个单独的 UL 或 UL 在单击切换按钮时位于容器外部，以便我可以相应地设置它的样式(在我的情况下为黄色 bg)，而且我能够接近的唯一方法是在容器 div 之外创建另一个。
这在切换菜单处于事件状态但仅在 <700px 左右时有效。当它未折叠时，还有另一个导航。
我可以将菜单隐藏在容器外，直到使用 js 激活切换菜单，或者是否有更好的方法来做到这一点？
在研究解决方案时，我遇到了类似的问题 Bootstrap 4 collapsed navbar background color但是没用
/* change navbar background on collapse */
@media (max-width: 768px) {
nav.navbar {
background: lightgray;
}
}
我觉得这应该是之前某个时候出现的问题，但我无法在任何地方找到解决方案。我希望我的问题足够简洁，可以回答。
最佳答案
似乎找到了我问题的答案。我使用媒体查询仅在导航栏处于我需要的宽度时定位导航栏并添加样式。我没有分离 div，而是找到了一个非常酷的解决方案，它完美地工作以获得我需要的全宽 bg 颜色。 https://css-tricks.com/full-width-containers-limited-width-parents/
关于javascript - 分离折叠和未折叠的 bootstrap 4 导航栏菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47232838/