列间距

在列之间自定义间距

Default gap #

每一列都有和变量 $column-gap 相等的间距，默认值是 0.75rem 。
由于列的两边都有间距，相邻两列的间距是 $column-gap 值的两倍,默认值是 1.5rem 。

默认间距

Gapless #

如果想要删除列间距，请在 columns 容器上添加 is-gapless 修饰符：

第一列

第二列

第三列

第四列

      <div class="columns is-gapless">
  <div class="column">
    无间距
  </div>
  <div class="column">
    无间距
  </div>
  <div class="column">
    无间距
  </div>
  <div class="column">
    无间距
  </div>
</div>
    

You can combine it with the is-multiline modifier:

你可以和 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>
    

Variable gap #

实验性

New 0.5.2

你可以在 .columns 容器上添加这 9 种修饰符来自定义间隔。

is-0 将移除间距 (类似于 is-gapless)
is-3 这是 默认值, 相当于 0.75rem
is-8 是最大间距，相当于 2rem

此外, 应该在 .columns 容器上添加 .is-variable 修饰符。

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

这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!

列间距

在 列 之间自定义间距

Default gap #

Gapless #

Variable gap #

在列之间自定义间距