bootstrap3 - 如何在折叠模式下更改背景颜色答案

【问题标题】：bootstrap3 - how to change background color when in collapsed modebootstrap3 - 如何在折叠模式下更改背景颜色
【发布时间】：2016-06-03 21:15:48
【问题描述】：

我有一个带有透明背景的 bootstrap3 导航栏 - bootply 位于 http://www.bootply.com/XZ2f721AZD

问题是，当菜单折叠时，我需要在下拉菜单上使用纯色背景颜色 (#821726)。

当菜单被放大时，我在下拉菜单上有一个白色背景，但无法弄清楚我必须更改什么才能让背景只出现在“汉堡包”视图的导航栏下拉菜单上（仍然想要导航栏本身是透明的）。

感谢您的任何想法。

【问题讨论】：

【解决方案1】：

您需要在样式表中添加一个新类：

.navbar-collapse.collapse.in
{
     background-color: #821726; // your color
}

【讨论】：

谢谢你，这对我来说很完美！我没有尝试 Roman 的其他答案，因为乍一看我认为它会使整个导航栏“不透明”，而我只是在寻找下拉菜单。这效果很好，我真的很感激你们俩！

【解决方案2】：

您的问题是您将 css 样式应用于所有屏幕分辨率。

在这种情况下，最好的方法是使用媒体查询，这样您就可以在特定的屏幕分辨率或不同的设备上使用特定的 css 规则。

在您的情况下，您可以在 CSS 的最底部添加一个媒体查询规则，这将在导航栏折叠时更改导航栏的背景。它以 768px 宽度折叠：

@media (max-width: 768px) {
.navbar-inverse {
    background-color: #821726;
   }
}

希望对你有帮助。

【讨论】：