列间隙(Columns gap)

自定义列间的间隙(gap)

默认间隙(Default gap) #

每一个列都有间隙(gap) 值是 变量 $column-gap的值, 默认值是 0.75rem.
由于列的两边都有间隙，因此相邻两列的间距是$column-gap的2倍, 默认值是 1.5rem.

Default gap

Default gap

Default gap

Default gap

无间隙(Gapless) #

如果想要删除列间距，请在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-one-quarter

is-one-quarter

is-one-quarter

is-half

is-one-quarter

is-one-quarter

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>

可变间隙(Variable gap) #

试验性的

你可以在 .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
Three columns
Three columns
1
2
3
4
5
6
7
8
9
10
11
12

此特性仅在支持 CSS 变量 的浏览器上可用:

如果你的 Sass 编译器不支持 CSS 变量，你可以通过将 $variable-columns设为 false，来关闭这个特性。

基于断点的列间隙 #

您可以为每个视口大小定义列间隙:

例如, here's how it looks with the following modifiers: 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>

Column

Column

Column

Column

Column

Column

如果要查看差异，请调整浏览器的大小，然后查看列间隙如何变化。