列间距

自定义列之间的间距

默认间距 #

每列都有一个间距，等于变量$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-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>

可变间距 #

您可以通过在.columns容器上附加9个修饰符中的一个来指定自定义列间距。

is-0将移除任何间距（类似于is-gapless）
is-3是默认值，相当于0.75rem值
is-8是最大间距2rem

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

间距： is-0 is-1 is-2 is-3 is-4 is-5 is-6 is-7 is-8

侧边

主

三列

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

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

基于断点的列间距 #

您可以为每个视口大小定义一个列间距

例如，以下是使用以下修饰符时的外观：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>

列

如果您想看到差异，请调整浏览器大小并查看列间距如何变化。

从这里开始

特性

Sass 工具

定制

CSS 库

CSS 辅助工具

赞助商

列间距

自定义列之间的间距

默认间距 #

无间距 #

可变间距 #

基于断点的列间距 #

如何支持 Bulma