简单创建响应式多列（均分）

1. 增加一个 columns 作为容器

2. 根据你的需要在其中添加更多的 column 元素

<div class="columns">
  <div class="column">
    第一列
  </div>
  <div class="column">
    第二列
  </div>
  <div class="column">
    第三列
  </div>
  <div class="column">
    第四列
  </div>
</div>

定义每一列的大小（1/4,1/3,1/2,1/5）

• is-three-quarters

• is-two-thirds

• is-half

• is-one-third

• is-one-quarter

• is-four-fifths

• is-three-fifths

• is-two-fifths

• is-one-fifth

<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>

<div class="columns">

  <div class="column is-one-fifth">is-one-fifth</div>

  <div class="column">Auto</div>

  <div class="column">Auto</div>

</div>

 基于十二网格系统进行布局

• is-1

• is-2

• is-3

• is-4

• is-5

• is-6

• is-7

• is-8

• is-9

• is-10

• is-11

• is-12

使用偏移

你可以使用 空列 （类似 <div class="column"></div>）来创建一个水平空间的 .column 元素，你还可以在其上使用 offset 修饰符，例如 .is-offset-x:

<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-mobile

• .is-narrow-tablet

• .is-narrow-touch

• .is-narrow-desktop

• .is-narrow-widescreen

• .is-narrow-fullhd

<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-mobile

只是电脑屏幕上横向显示，其余的响应式：

针对不同的设备进行特定的显示大小

列嵌套

<div class="columns">
  <div class="column">
    <p class="bd-notification is-info">First column</p>
    <div class="columns is-mobile">
      <div class="column">
        <p class="bd-notification is-info">First nested column</p>
      </div>
      <div class="column">
        <p class="bd-notification is-info">Second nested column</p>
      </div>
    </div>
  </div>
  <div class="column">
    <p class="bd-notification is-danger">Second column</p>
    <div class="columns is-mobile">
      <div class="column is-half">
        <p class="bd-notification is-danger">50%</p>
      </div>
      <div class="column">
        <p class="bd-notification is-danger">Auto</p>
      </div>
      <div class="column">
        <p class="bd-notification is-danger">Auto</p>
      </div>
    </div>
  </div>
</div>

 is-gapless无间距

多行列

变动间隔

竖向居中对齐（is-vcentered）：

<div class="columns is-vcentered">
  <div class="column is-8">
    <p class="bd-notification is-primary">First column</p>
  </div>
  <div class="column">
    <p class="bd-notification is-primary">Second column with more content. This is so you can see the vertical alignment.</p>
  </div>
</div>

横向中心对齐（is-centered）

<div class="columns is-mobile is-centered">
  <div class="column is-half">
    <p class="bd-notification is-primary">
      <code class="html">is-half</code><br>
    </p>
  </div>
</div>