html - 在移动 View 中使用 css 显示隐藏的 div

Question

这是我的 div 内容:

<div style="display:none;" id="sidebar">
<ul  class="nav navbar-inverse" style="list-style:none;">
<li><a href="#ccc">ccc</a></li>
<li><a href="#bbb">bbb</a></li>
</ul>
</div>

我默认使用内联样式隐藏它。现在我想要的是，仅在移动 View 中显示此 div。

我试过这样的:

@media only screen and (max-width: 990px) {
        #sidebar { 
         display: block;
        }
      }

但它没有显示 div，它仍然是隐藏的。如何使其仅在移动 View 中可见？

给我一​​些建议。

Answer 1

内联样式将覆盖样式表中的所有样式。我不推荐使用 !important，因为维护它可能是一场噩梦。

简单地取出你的内联样式:

<div id="sidebar">
  <ul  class="nav navbar-inverse" style="list-style:none;">
    <li><a href="#ccc">ccc</a></li>
    <li><a href="#bbb">bbb</a></li>
  </ul>
</div>

然后将其放入您的样式表中:

#sidebar { 
  display: none;
}
@media only screen and (max-width: 990px) {
  #sidebar { 
    display: block;
  }
}