台式机、平板电脑或移动设备上的布尔玛不同的列大小答案

【问题标题】：Bulma different column sizes on desktop, tablet or mobile台式机、平板电脑或移动设备上的布尔玛不同的列大小
【发布时间】：2021-02-04 00:38:01
【问题描述】：

Bulma CSS 框架

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

有人知道怎么做吗？

【问题讨论】：

标签： html css frameworks grid bulma

【解决方案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>

【讨论】：

你在平板设备上试过了吗？
在三星 Galaxy Tab A 上是的