列选项

设计不同类型的列布局

垂直对齐 #

要垂直对齐列，请将 is-vcentered 修饰符添加到 columns 容器。

第一列

内容更多的第二列。这样您就可以看到垂直对齐。

<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

自动

<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
第一列

is-narrow
我们的第二列

is-narrow
第三列

is-narrow
第四列

is-narrow
第五列

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

从这里开始

特性

Sass 工具

定制

CSS 库

CSS 助手

列选项

设计不同类型的列布局

垂直对齐 #

多行 #

列居中 #

如何支持 Bulma