默认情况下，列仅从平板电脑开始激活。这意味着列在移动端上彼此堆叠。
如果你希望列在移动端上也能工作，只需在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>
如果你仅希望列从桌面端开始出现，只需在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>每个断点不同的列大小 #
你可以为每个视口大小（移动设备、平板电脑和台式机）定义一个列大小。
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>