bulma 在桌面上有 2 行 2 列，但有 4 行 1 列

Question

是否有更优雅的方法使用 bulma 实现此目的：

桌面（https://jsfiddle.net/AlexZeitler/2odamk03/）

<div class="container">
  <div class="columns">
    <div class="column">
      <span>adress</span>
    </div>
   <div class="column">
      <span>city</span>
    </div>
  </div>
  <div class="columns">
    <div class="column">
      <span>phone</span>
    </div>
    <div class="column">
      <span>email</span>
    </div>
  </div>
</div>

平板电脑应如下所示 (https://jsfiddle.net/AlexZeitler/yuhxr13b/)：

<div class="container">
  <div class="columns">
    <div class="column">
      <span>adress</span>
    </div>
  </div>
  <div class="columns">
    <div class="column">
      <span>city</span>
    </div>
  </div>
  <div class="columns">
    <div class="column">
      <span>phone</span>
    </div>
  </div>
  <div class="columns">
    <div class="column">
      <span>email</span>
    </div>
  </div>
</div>

.container 有一个固定的 width 取决于平板电脑或桌面模式：

.container {
  padding: 2em;
  width: 400px;
  border: 1px solid red
}

Answer 1

我在做类似的事情时使用tiles。
不短，但你不必担心 .columns

https://jsfiddle.net/0c38ejqa/

Answer 2

您需要使用修饰符限制 colum div 的水平大小。有很多方法可以做到这一点。这是一个：

<div class="container">
  <div class="columns is-tablet">
    <div class="column is-half">
      <span>adress</span>
    </div>
   <div class="column is-half">
      <span>city</span>
    </div>
  </div>
  <div class="columns is-tablet">
    <div class="column is-half">
      <span>phone</span>
    </div>
    <div class="column is-half">
      <span>email</span>
    </div>
  </div>
</div>

bulma 在桌面上有 2 行 2 列，但有 4 行 1 列

bulma have 2 rows with 2 columns on desktop but have 4 rows with 1 column

bulma