列的宽度（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

is-three-quarters

Auto

is-two-thirds

Auto

is-three-fifths

Auto

is-half

Auto

is-two-fifths

Auto

is-one-third

Auto

is-one-quarter

Auto

is-one-fifth

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-1
is-2
is-3
is-4
is-5
is-6
is-7
is-8
is-9
is-10
is-11
is-12

命名约定

每个修饰符类都是以您需要 12 列中多少列的方式命名。所以如果您需要 12 列中的 7 列的宽度，就用 is-7。

is-1

is-2

is-3

is-4

is-5

is-6

is-7

is-8

is-9

is-10

is-11

is-12

偏移（Offset） #

您可以利用 .column元素通过空列（如 <div class="column"></div>）创建横向空间，也可以使用 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>