如果想要更改单个列的尺寸，可以使用以下类之一
-
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 列系统 #
由于网格可以分为 12 列，因此每个分割都有尺寸类
is-1is-2is-3is-4is-5is-6is-7is-8is-9is-10is-11is-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 元素周围创建水平空间，但您也可以使用 偏移量 修饰符，例如 .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 修饰符。 其他列将填充剩余空间。
窄列
此列只有 200 像素宽。
弹性列
此列将占用剩余的可用空间。
<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
