如何使用@media 按 id 隐藏元素？

Question

我在 CSS 中使用 @media 查询，如何为特定的 @media 大小设置 display:none 并覆盖所有 bootstrap 媒体设置？

我的html:

<div id="top" class="navbar navbar-fixed-top" role="navigation">
        <div class="container"> 
         Menu
        </div>
    </div>

我的css:

@media only screen and (max-width: 768px){
#top{
    dislay:none;
    }
}

我哪里错了？

Answer 1

您的 css 中的拼写错误替换 display:none

@media only screen and (max-width: 768px){
  #top{
    display:none;
  }
}

Answer 2

你刚才写错了。是 display，而不是 dislay。

如果保留对象所在的结构很有趣，但不显示它，请考虑使用 visibility:hidden 而不是 display:none。