css - 更改不同 View 中的列数

Question

移动 View 中的两列和桌面 View 中的三列。

示例

* {
  border: 1px solid;
  box-sizing: border-box;
}

.flexbox {
  display: flex;
  flex-wrap: wrap;
}

.flexbox>div {
  width: 33.333%;
}

@media screen and (max-width: 768px) {
  .flexbox>div {
    width: 50%;
  }
}

<div class="flexbox">
  <div>DIV 1</div>
  <div>DIV 2</div>
  <div>DIV 3</div>
  <div>DIV 4</div>
  <div>DIV 5</div>
  <div>DIV 6</div>
</div>

我想知道，您将如何使用 bulma 进行此操作。

尝试

<div class="columns is-mobile is-multiline">
  <div class="column is-4-desktop is-6-mobile">DIV 1</div>
  <div class="column is-4-desktop is-6-mobile">DIV 2</div>
  <div class="column is-4-desktop is-6-mobile">DIV 3</div>
  <div class="column is-4-desktop is-6-mobile">DIV 4</div>
  <div class="column is-4-desktop is-6-mobile">DIV 5</div>
  <div class="column is-4-desktop is-6-mobile">DIV 6</div>
</div>

在移动 View 中它是正确的，但在桌面 View 中则不然。

缺少什么？

JSFiddle

Answer 1

您还必须定义平板电脑尺寸以适合您的桌面尺寸，因为台式机和移动设备之间的尺寸是 bulma 的平板电脑。

 <div class="columns is-mobile is-multiline">
      <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 1</div>
      <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 2</div>
      <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 3</div>
      <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 4</div>
      <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 5</div>
      <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 6</div>
    </div>