我需要有单独的导航栏,具体取决于网站是在移动设备上还是在桌面设备上查看。我设计了两个导航栏(我知道使用 JS 会更容易,但这需要是 CSS 解决方案)。
<nav class="navbar navbar-default navbar-fixed-top pb-mobile-nav">
...
<nav class="navbar navbar-default navbar-fixed-top pb-main-nav">
...
我的 CSS 看起来像这样:
.pb-main-nav {
display:block;
}
.pb-mobile-nav {
dispaly: none;
}
当我们谈到 iPhone Plus 尺寸时
@media screen and (max-width: 414px) {
.pb-main-nav {
display:none;
}
.pb-mobile-nav {
dispaly: block;
}
}
.pb-main-nav接受none的新显示,但是.pb-mobile-nav不接受block的显示,还是none。我不明白为什么一个有效而另一个无效(根据特定规则),但我现在没有菜单。这不是最佳的。 :)
关于如何让这个 CSS 工作的任何想法?
最佳答案
您的代码中的一个错误:
.pb-mobile-nav {
dispaly: block;
}
更改为:
display: block;
关于css - Bootstrap : CSS media queries not overriding original CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53948312/