列选项

设计不同类型的列布局

Multiline #

当你想换行时，你可以闭合 columns 容器标签然后开始新的一行，您也可以在容器上通过增加 is-multiline 修饰符，来增加更多的行容纳 column 元素。

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>

Centering columns #

虽然您可以通过空列（例如<div class="column"></div>）来创建一个水平居中的 .column 元素。当然您也可以通过在 .column 的父级元素上添加 .is-centered 来实现。

is-half
is-narrow

<div class="columns is-mobile is-centered">
  <div class="column is-half is-narrow">
    <p class="bd-notification is-info">
      <code class="html">is-half</code><br>
      <code class="html">is-narrow</code>
    </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-info">
      <code class="html">is-narrow</code><br>
      First Column
    </p>
  </div>
  <div class="column is-narrow">
    <p class="bd-notification is-success">
      <code class="html">is-narrow</code><br>
      Our Second Column
    </p>
  </div>
  <div class="column is-narrow">
    <p class="bd-notification is-danger">
      <code class="html">is-narrow</code><br>
      Third Column
    </p>
  </div>
  <div class="column is-narrow">
    <p class="bd-notification is-info">
      <code class="html">is-narrow</code><br>
      The Fourth Column
    </p>
  </div>
  <div class="column is-narrow">
    <p class="bd-notification is-success">
      <code class="html">is-narrow</code><br>
      Fifth Column
    </p>
  </div>
</div>

设计不同 类型 的列布局

Multiline #

Centering columns #

设计不同类型的列布局