css - Materialise 响应实用程序不工作

Question

我不明白为什么实用程序“show-on-small”等不起作用。尽管以下脚本应该只在小屏幕上显示，但它一直显示(请注意其他实体化类也可以工作，所以并不是我不能访问它们的文件)。

例子:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<div class="show-on-small"> <p  style="color: black" class="show-on-medium">Only smaall</p></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

有什么想法吗？多谢!

Answer 1

通过查看 .show-on-small 的作用，我们可以清楚地看到它从不隐藏 元素。它只确保它显示在小屏幕上:

@media only screen and (max-width: 600px) {
  .show-on-small{
    display:block !important
  }
}

因此下一个示例将起作用:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<p class="show-on-small" style="display:none;">I only show on small</p>

... 因为它在所有情况下都有 display:none，除了在小情况下它被 Materialize 的 CSS 覆盖 !important。

请注意，您还可以在 Materialize 中使用 .hide-on-* 类，它可以做您似乎想要的事情。