列选项

设计不同类型的列布局

垂直对齐 #

要垂直对齐列，请将 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

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

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