css - Bootstrap : CSS media queries not overriding original CSS

Question

我需要有单独的导航栏，具体取决于网站是在移动设备上还是在桌面设备上查看。我设计了两个导航栏(我知道使用 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 工作的任何想法？

Answer 1

您的代码中的一个错误:

.pb-mobile-nav  { 
        dispaly: block;
}

更改为:

display: block;