Tailwind CSS 隐藏和可见

Question

后端开发在这里学习前端。我试图在中小屏幕上隐藏一个元素，并在其余屏幕上可见。

但问题是，当我这样做时

sm:hidden

它会隐藏小屏幕及以上的元素。当我尝试执行

sm:hidden md:visible

时，该元素在中等屏幕及以上屏幕上不可见。我该怎么办？

Answer 1

正如我们在官方文档中所读到的那样：

默认情况下，Tailwind 使用移动优先断点系统

然后在您的情况下，小断点

hidden

和

visible

上大

lg

断点及以上：

<div class="hidden lg:block">
  <!-- ... -->
</div>

示例：

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div class="hidden lg:block">
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </div>

</body>

</html>

Answer 2

0
投票

我还是没明白，谁能解释一下

Tailwind CSS 隐藏和可见

问题描述投票：0回答：2

2个回答

最新问题

Tailwind CSS 隐藏和可见

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2