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

Question

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

麻烦的是，当菜单折叠时，我需要在下拉列表中显示纯色背景颜色（＃821726）。

当菜单放大时，我在下拉菜单上有白色背景，但无法解决我必须更改的内容，只能在“汉堡包”视图中的导航栏下拉列表中显示背景（仍然需要导航栏本身透明）。

感谢您的任何想法。

Answer 1

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

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

Answer 2

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

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

在您的情况下，您只需在css的最底部添加媒体查询规则，这将在导航栏折叠时更改导航栏的背景。它以768像素宽度折叠：

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

希望它有所帮助。