Bulma 在台式机、平板电脑或移动设备上的不同列大小

Question

布尔玛CSS框架

我正在使用 bulma 的网格系统来制作列块。例如，我有 4 个 div 彼此相邻，每个 div 的列 is-3 is-offset-0 作为其 class。我的问题是如何在平板电脑 2x2 和移动设备 1x1 上显示这些 div？移动设备可以正常工作，但我无法在平板电脑上使用它。在图片中，您看到彼此相邻的 4 列，这就是我在桌面上想要的，但仅在平板电脑上我希望它们每行显示 2 列。

有人知道怎么做吗？

Answer 1

<!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>

Bulma 在台式机、平板电脑或移动设备上的不同列大小

Bulma different column sizes on desktop, tablet or mobile

html

css

grid

frameworks

bulma