Bootstrap3-如何在折叠模式下更改背景颜色

Question

我有一个带有透明背景的bootstrap3 navbar-bootply在http://www.bootply.com/xz2f721azd

麻烦是，我需要一个坚实的背景色(#821726)在下拉菜单时折叠。

当菜单被放大时，我在下拉菜单上有一个白色背景，但我无法确定我必须改变什么，以使背景只出现在“汉堡”视图中的navbar下拉菜单上（仍然希望navbar本身是透明的）。

谢谢你的意见。

Answer 1

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

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

在您的例子中，您可以在css的底部添加一个媒体查询规则，当navbar折叠时，它将改变navbar的背景。它以768px宽度折叠：

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

希望有帮助。

Answer 2

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

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