每列都有一个等于 变量 $column-gap 的 间距，默认值为 0.75rem。
由于间距位于列的每一侧，因此两个相邻列之间的间距将是 $column-gap 值的两倍，默认情况下为 1.5rem。
赞助
列间距
自定义列之间的 间距
默认间距 #
默认间距
默认间距
默认间距
默认间距
无间距 #
如果要删除列之间的空间，请在 columns 容器上添加 is-gapless 修饰符
第一列
第二列
第三列
第四列
<div class="columns is-gapless">
<div class="column">No gap</div>
<div class="column">No gap</div>
<div class="column">No gap</div>
<div class="column">No gap</div>
</div>您可以将其与 is-multiline 修饰符结合使用
is-one-quarter
is-one-quarter
is-one-quarter
is-one-quarter
is-half
is-one-quarter
is-one-quarter
is-one-quarter
自动
<div class="columns is-gapless is-multiline is-mobile">
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column is-half">is-half</div>
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column">Auto</div>
</div>可变间距 #
您可以通过在 .columns 容器上附加 9 个修饰符之一来指定自定义列间距。
is-0将删除任何间距（类似于is-gapless）is-3是默认值，等效于0.75rem值is-8是最大间距，为2rem
<div class="columns is-8">
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
</div>基于断点的列间距 #
您可以为每个视口大小定义列间距
例如，以下是使用以下修饰符时的外观：is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd
<div class="columns is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
</div>列
列
列
列
列
列
