列选项

设计不同类型的列布局

垂直对齐 #

要垂直对其列，在容器 columns 上添加 is-vcentered 修饰符。

First column

Second column with more content. This is so you can see the vertical alignment.

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

多行 #

当您想要开始新的一行的时候，可以关闭一个容器 columns 然后再开始一个。但是，您也可以通过添加 is-multiline 修饰符和添加更多列元素来实现。

is-one-quarter

is-half

is-one-quarter

Auto

<div class="columns is-multiline is-mobile">
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-half">
    <code>is-half</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column">
    Auto
  </div>
</div>

列居中 #

当您使用空列（如 <div class="column"></div>）创建水平的空占位 .column 元素时，您也可以在其父元素 .columns 上使用 .is-centered 来实现：

is-half

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

使用 .is-multiline 创建一个弹性的、剧中的列表（试着调整浏览器窗口大小查看不同视口下剧中的效果）：

is-narrow
First Column

is-narrow
Our Second Column

is-narrow
Third Column

is-narrow
The Fourth Column

is-narrow
Fifth Column

<div class="columns is-mobile is-multiline is-centered">
  <div class="column is-narrow">
    <p class="bd-notification is-primary">
      <code class="html">is-narrow</code><br>
      First Column
    </p>
  </div>
  <div class="column is-narrow">
    <p class="bd-notification is-primary">
      <code class="html">is-narrow</code><br>
      Our Second Column
    </p>
  </div>
  <div class="column is-narrow">
    <p class="bd-notification is-primary">
      <code class="html">is-narrow</code><br>
      Third Column
    </p>
  </div>
  <div class="column is-narrow">
    <p class="bd-notification is-primary">
      <code class="html">is-narrow</code><br>
      The Fourth Column
    </p>
  </div>
  <div class="column is-narrow">
    <p class="bd-notification is-primary">
      <code class="html">is-narrow</code><br>
      Fifth Column
    </p>
  </div>
</div>