2.3 列布局进阶

一、多行列布局

我们通常的一个网页中有多行内容,这个可以通过两种方式实现。


1、创建多个columns


First column

Second column

Third column

Fourth column

<div class="columns">
        <div class="column is-6">
            <p class="bd-notification is-primary">
                First column
            </p>
        </div>
        <div class="column is-6">
            <p class="bd-notification is-primary">
                Second column
            </p>
        </div>
</div>
<div class="columns">
        <div class="column is-6">
            <p class="bd-notification is-primary">
                Third column
            </p>
        </div>
        <div class="column is-6">
            <p class="bd-notification is-primary">
                Fourth column
            </p>
        </div>
</div>

2、使用一个多列columns

只需要在columns后面加上 is-multiline就是多行列,多行列记得一定要设置宽度。

First column

Second column

Third column

Fourth column


<div class="columns is-multiline">
        <div class="column is-6">
            <p class="bd-notification is-primary">
                First column
            </p>
        </div>
        <div class="column is-6">
            <p class="bd-notification is-primary">
                Second column
            </p>
        </div>
        <div class="column is-6">
            <p class="bd-notification is-primary">
                Third column
            </p>
        </div>
        <div class="column is-6">
            <p class="bd-notification is-primary">
                Fourth column
            </p>
        </div>
</div>

3、一个网页中可以综合使用以上两种。

二、列居中对齐和垂直对齐

居中对齐和垂直对齐是说列里面的内容,以及嵌套的内容居中对齐。

使用起来非常简单,像多行列一样,直接在colums后面加上is-centered 或者is-vcentered即可,这里就不演示了。

is-vcentered 垂直对齐

is-centered 居中对齐


三、裂间隙

1、默认裂间隙

裂间隙是指列元素里面的每个列之间的间隙。

每一个列都有间隙(gap) 值是 变量 $column-gap的值, 默认值是 0.75rem. 

由于列的两边都有间隙,因此相邻两列的间距是$column-gap的2倍, 默认值是 1.5rem.

2、无间隙

你可以通过向columns后面添加is-gapless来使得列之间无间隙


First column

Second column

Third column

Fourth column


<div class="columns is-multiline  is-gapless">
        <div class="column is-6">
            <p class="bd-notification is-primary">
                First column
            </p>
        </div>
        <div class="column is-6">
            <p class="bd-notification is-primary">
                Second column
            </p>
        </div>
        <div class="column is-6">
            <p class="bd-notification is-primary">
                Third column
            </p>
        </div>
        <div class="column is-6">
            <p class="bd-notification is-primary">
                Fourth column
            </p>
        </div>
</div>

3、自定义间隙

你可以在.columns 容器上添加is-0 到 is-8 这 9 种修饰符来自定义列间隙。

其中

is-0 将移除所有间隙 (类似于 is-gapless)

is-3 是 默认值, 等同于 0.75rem

is-8 是间隙的最大值,等于 2rem

使用自定义间隙的时候 is-variable 修饰符也应该已经添加到columns 容器。

注意 is-x用在columns后面是表示列宽,用在column 后面是表示单个列所占屏幕的十二分之几。

First column

Second column

Third column

Fourth column

<div class="columns is-multiline  is-variable  is-8">
        <div class="column is-6">
            <p class="bd-notification is-primary">
                First column
            </p>
        </div>
        <div class="column is-6">
            <p class="bd-notification is-primary">
                Second column
            </p>
        </div>
        <div class="column is-6">
            <p class="bd-notification is-primary">
                Third column
            </p>
        </div>
        <div class="column is-6">
            <p class="bd-notification is-primary">
                Fourth column
            </p>
        </div>
</div>

4、基于断点的间隙

以下代码实现了在不同设备上使用不同的间隙。


Column

Column

Column

Column

Column

Column

<div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
</div>


返回头部

问题反馈
返回顶部