Bulma 在台式机、平板电脑或移动设备上使用不同的列尺寸
Rac*_*oon 2 html css grid frameworks bulma
布尔玛 CSS 框架
我正在使用布尔玛的网格系统来制作柱块。例如，我有 4 个彼此相邻的 div，每个 div 都有列 is-3 is-offset-0 作为其类。我的问题是如何在平板电脑 2x2 和移动设备 1x1 上显示这些 div？移动设备可以工作，但我无法在平板电脑上工作。在图片中，您可以看到 4 列彼此相邻，这就是我在台式机上想要的，但仅在平板电脑上我希望它们每行显示 2 列。
有谁知道如何做到这一点？
小智 5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello Bulma!</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
/>
</head>
<body>
<style>
.column p {
background-color: coral;
}
</style>
<div class="container">
<div class="columns is-multiline">
<div
class="column is-3 is-3-fullhd is-3-desktop is-6-tablet is-12-mobile"
>
<p>First column</p>
</div>
<div
class="column is-3 is-3-fullhd is-3-desktop is-6-tablet is-12-mobile"
>
<p>Second column</p>
</div>
<div
class="column is-3 is-3-fullhd is-3-desktop is-6-tablet is-12-mobile"
>
<p>Third column</p>
</div>
<div
class="column is-3 is-3-fullhd is-3-desktop is-6-tablet is-12-mobile"
>
<p>Fourth column</p>
</div>
</div>
</div>
</body>
</html>