默认情况下，仅从平板电脑开始激活列。 这意味着列在移动端上彼此堆叠。
如果您希望列在移动端上也能工作，只需在 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>
