Question

我希望我的边框在移动设备之类的顶部，而在其他设备的左侧。它可以在移动设备上运行，但对于其他人，它正在添加属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <title>Home</title>
</head>

<body>
  <img src="https://picsum.photos/800/400" alt="login image" class="rounded-t-lg sm:rounded-l-lg">
</body>

</html>

Answer 1

由于要添加不带前缀的rounded-t-lg，因此它在所有屏幕尺寸上都有效。

要在sm断点处隐藏屏幕的顶部边框，您必须添加sm:rounded-t-none。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <title>Home</title>
</head>

<body>
  <img src="https://picsum.photos/800/400" alt="login image" class="rounded-t-lg sm:rounded-t-none sm:rounded-l-lg">
</body>

</html>

用sm覆盖样式：

1 个答案: