更改不同视图中的列数

Question

移动视图中的两列和桌面视图中的三列。

例子

* {
  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>

在移动视图中它是正确的，但在桌面视图中不正确。

少了什么？

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>

更改不同视图中的列数

Change column count in different views

css

flexbox

bulma