Html 引导小型设备，切换菜单背景色

这张图片能说出100多个单词

所以我正在尝试获取小型设备导航栏下拉列表的背景，请参见下面的图片。另外，我没有使用引导默认主题css文件。请注意，这仅在设备太小无法看到网站的完整导航栏时使用

请注意，我使用FontAwesome来提供图标

HTML:

您应该将navbar默认类设置为您的navbar，或者您可以使用此css自己设置背景色：

.navbar {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

---

有不同的方法，如果要在特定的宽度上执行，请使用：media query

使用以下代码：

@media(max-width:420px){
.nav{
background-color: #ccc;
border-color: #000;
}
}

---

这看起来不太好。使用该解决方案，我将失去菜单栏的透明度。然后使.navbar保持透明，并将背景色设置为.navbar collapseen即使在这种情况下，当它折叠时，也会出现难看的白色条。如果可以避免的话？请参阅：

.navbar {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

@media(max-width:420px){
.nav{
background-color: #ccc;
border-color: #000;
}
}