响应式列布局(Columns responsiveness)

处理每个断点的 不同列布局

Mobile columns #

默认情况下，列只在 平板(tablet) 及以上视口激活，这意味着列在 移动设备 上是堆叠的。
如果您希望也在 移动设备(mobile) 上也生效，只需要在 columns 容器上添加 is-mobile 修饰符。

1

2

3

4

<div class="columns is-mobile">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

调整浏览器尺寸

如果你想查看其中的区别，请调整浏览器的大小查看列什么时候堆叠，什么时候水平分布。

如果你只想在 桌面(desktop) 以上显示列，只需要在 columns 容器上添加 is-desktop 修饰符:

1

2

3

4

<div class="columns is-desktop">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

不同断点的列尺寸 #

你可以为每个视口定义 列大小：mobile（移动设备），tablet（平板设备）和 desktop（桌面设备）

is-three-quarters-mobile
is-two-thirds-tablet
is-half-desktop
is-one-third-widescreen
is-one-quarter-fullhd

2

3

4

5

调整浏览器尺寸

如果您希望看到这些类的区别，调整您的浏览器窗口，并查看相同的列在每个断点处的宽度变化。

<div class="columns is-mobile">
  <div class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
    <code>is-three-quarters-mobile</code><br>
    <code>is-two-thirds-tablet</code><br>
    <code>is-half-desktop</code><br>
    <code>is-one-third-widescreen</code><br>
    <code>is-one-quarter-fullhd</code>
  </div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>