列间隙(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 容器.

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,来关闭这个特性。


基于断点的列间隙 #

Since 0.7.2

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

例如, 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

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