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

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

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

更改不同视图中的列数

1 个答案: