Question

我不明白为什么“小显示”实用程序等无法正常工作。即使以下脚本只显示在很小的位置，它也会一直显示（请注意，其他实现类也可以使用，因此并不是我无法访问它们的文件）。

示例：

<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-*类，这些类可以满足您的需求。

Answer 2

您可以使用hide-on-med-and-up来为宽度大于601像素的屏幕设置display: none。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/><!-- Do you have this line? -->
  </head>
    
  <body>
    <div class="hide-on-med-and-up">Only smaall</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
  </body>
</html>

它们的文件可以在https://github.com/Dogfalo/materialize上找到。从那里您也可以做出贡献。

Answer 3

仅在移动设备上显示时使用 .hide-on-med-and-up 它会起作用

物化的响应工具无法正常工作

3 个答案: