列间隙

定制列间的间隙（gap）

默认间隙 #

每一个列都有一个默认值为0.75rem的名为$column-gap的变量间隙。
由于间隙在列的每一面都有，所以相邻的列的间隙值会是 $column-gap 的两倍，也就是默认为 1.5rem。

Default gap

无间隙 #

如果您想删除两个列之间的空白，在容器 columns 上添加 is-gapless 修饰符即可：

First column

Second column

Third column

Fourth column

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

is-one-quarter

Auto

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

可变间隙 #

Experimental

您可以通过在容器 .columns 上添加 9 个修饰符 之一来指定 定制列间隙。

is-0 会删除间隙（类似于 is-gapless）
is-3 就是默认值，等于0.75rem
is-8 是最大间隙值 2rem

另外，.is-variable 应该添加到容器 .columns 上。

Gap: is-0 is-1 is-2 is-3 is-4 is-5 is-6 is-7 is-8

Side

Main

Three columns

此功能仅限于支持 CSS 变量的浏览器。

如果您的 Sass 安装不支持 CSS 变量，您可以通过设置 $variable-columns 为 false禁用此功能。

基于列间隙的断点 #

您可以为每个尺寸的视口（viewport）定义一个列间隙:

例如，这就是使用了下列修饰符后不同视口看起来不同的写法：is-variable is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd

<div class="columns is-variable 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>