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列

2 个答案: