如果要更改单个列的大小,可以使用以下类:
-
is-three-quarters
-
is-two-thirds
-
is-half
-
is-one-third
-
is-one-quarter
-
is-full
其他列将自动填充剩余空间
列尺寸(Column sizes)
分别定义每个列的 尺寸(size)
如果要更改单个列的大小,可以使用以下类:
is-three-quarters
is-two-thirds
is-half
is-one-third
is-one-quarter
is-full
其他列将自动填充剩余空间
您现在可以使用 20%
的倍数:
is-four-fifths
is-three-fifths
is-two-fifths
is-one-fifth
is-full
is-four-fifths
Auto
Auto
is-three-quarters
Auto
Auto
is-two-thirds
Auto
Auto
is-three-fifths
Auto
Auto
is-half
Auto
Auto
is-two-fifths
Auto
Auto
is-one-third
Auto
Auto
is-one-quarter
Auto
Auto
is-one-fifth
Auto
Auto
<div class="columns">
<div class="column is-four-fifths">is-four-fifths</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-three-quarters">is-three-quarters</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-two-thirds">is-two-thirds</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-three-fifths">is-three-fifths</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-half">is-half</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-two-fifths">is-two-fifths</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-one-third">is-one-third</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-one-fifth">is-one-fifth</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
栅格由 12 列组成,每个栅格都有自己的尺寸:
is-1
is-2
is-3
is-4
is-5
is-6
is-7
is-8
is-9
is-10
is-11
is-12
is-1
1
1
1
1
1
1
1
1
1
1
1
is-2
1
1
1
1
1
1
1
1
1
1
is-3
1
1
1
1
1
1
1
1
1
is-4
1
1
1
1
1
1
1
1
is-5
1
1
1
1
1
1
1
is-6
1
1
1
1
1
1
is-7
1
1
1
1
1
is-8
1
1
1
1
is-9
1
1
1
is-10
1
1
is-11
1
is-12
你可以使用 空列 (类似 <div class="column"></div>
)来创建一个水平空间的 .column
元素,你还可以在其上使用 offset
修饰符,例如 .is-offset-x
:
is-half
is-offset-one-quarter
is-three-fifths
is-offset-one-fifth
is-4
is-offset-8
is-11
is-offset-1
<div class="columns is-mobile">
<div class="column is-half is-offset-one-quarter"></div>
</div>
<div class="columns is-mobile">
<div class="column is-three-fifths is-offset-one-fifth"></div>
</div>
<div class="columns is-mobile">
<div class="column is-4 is-offset-8"></div>
</div>
<div class="columns is-mobile">
<div class="column is-11 is-offset-1"></div>
</div>
如果你需要一个指定空间的类,可以使用is-narrow
修饰符。其他类将填充剩余的空间。
Narrow column
This column is only 200px wide.
Flexible column
This column will take up the remaining space available.
<div class="columns">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">Narrow column</p>
<p class="subtitle">This column is only 200px wide.</p>
</div>
</div>
<div class="column">
<div class="box">
<p class="title is-5">Flexible column</p>
<p class="subtitle">This column will take up the remaining space available.</p>
</div>
</div>
</div>
对于尺寸修饰符,您可以为不同的断点设置窄列:
.is-narrow-mobile
.is-narrow-tablet
.is-narrow-touch
.is-narrow-desktop
.is-narrow-widescreen
.is-narrow-fullhd