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

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

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

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

感谢您的任何想法。

【问题讨论】:

  • 您的 sn-p 工作不正常!
  • 你能添加一些代码吗?

标签: html css twitter-bootstrap-3


【解决方案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;
   }
}

希望对你有帮助。

【讨论】:

    猜你喜欢
    • 2016-11-20
    • 2021-12-13
    • 1970-01-01
    • 2015-11-15
    • 2012-06-28
    • 2022-10-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多