Bluma框架的列的布局方法
1、默认间距：
每列有一个默认的间距为0.75rem。 如果间隔位于列的每一侧，那么两个相邻列之间的间隔将是值的两倍为1.5rem
2、无缝：
我们在上面介绍过列之前存在有默认间隙，如果要删除列之间的空隙（效果如下图所示）
3、我们需要在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>
4、可变间隙：
我们还可以通过在容器上附加9个修饰符之一（is-0，...，is-8）来指定自定义列间隔。 is-0无间隔，is-1为0.25rem，is-2为0.5rem，以此类推。下图以is-5为例：
5、多行：
每当你想开始一个新的行，你可以关闭一个columns容器，并开始一个新的。但是，您也可以在容器中添加is-multiline修改器并添加更多列元素，以适合单行。
6、上述的代码如下：
<div class="columns is-multiline is-mobile">
<div class="column is-one-quarter">
<code>is-one-quarter</code> </div>
<div class="column is-one-quarter">
<code>is-one-quarter</code> </div>
<div class="column is-one-quarter">
<code>is-one-quarter</code> </div>
<div class="column is-one-quarter">
<code>is-one-quarter</code> </div>
<div class="column is-half">
<code>is-half</code> </div>
<div class="column is-one-quarter">
<code>is-one-quarter</code> </div>
<div class="column is-one-quarter">
<code>is-one-quarter</code> </div>
<div class="column"> Auto </div>
</div>
7、居中列:
虽然可以使用空列（如<div class="column"></div>）在.column元素周围创建水平空间，但也可以.is-centered在父.columns元素上使用:
<div class="columns is-mobile is-centered">
<div class="column is-half is-narrow">
<p class="bd-notification is-info">
<code class="html">is-half</code><br>
<code class="html">is-narrow</code>
</div>
</div>
8、与使用.is-multiline，以创建一个灵活的，居中的列。
9、上述实现的代码如下：
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<p class="bd-notification is-info">
<code class="html">is-narrow</code><br> First Column
</div>
<div class="column is-narrow">
<p class="bd-notification is-success">
<code class="html">is-narrow</code><br>
Our Second Column
</div>
<div class="column is-narrow">
<p class="bd-notification is-danger">
<code class="html">is-narrow</code><br>
Third Column
</div>
<div class="column is-narrow">
<p class="bd-notification is-info">
<code class="html">is-narrow</code><br>
The Fourth Column
</div>
<div class="column is-narrow">
<p class="bd-notification is-success">
<code class="html">is-narrow</code><br>
Fifth Column
</div>
</div>
