自适应列

为每个断点应用不同列布局

移动设备列 #

默认情况下，平铺列只会出现在 平板（tablet）及大于平板的设备上。这就是说在移动设备上，列只会从上到下的堆叠。
如果您想让列也在移动设备上平铺，只需在容器columns上添加修饰符 is-mobile 即可：

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

重置大小

如果您想要看到不同显示，您可以重新调整您的浏览器窗口的大小，就会看到什么时候列堆叠和什么时候列平铺。

如果您只想要列在桌面电脑及以上大屏设备上使用，只需在容器 columns 上添加修饰符 is-desktop 即可：

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

每种断点的不同列宽 #

您可以为每一种 viewport 定义列宽：移动设备、平板和桌面系统。

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

调整大小

如果您想看到这些类的表现，调整您的浏览器窗口的大小，就会看到同样的列在不同断点条件下的变化。

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