New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

文档

当你使用 Bulma 创建一个网站 所需要的一切

列大小

分别定义 每个 列的 大小

如果要更改单个列的大小，可以使用以下类

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter

其他 的列将自动填充 剩下 的空间

New! 0.6.1

您现在可以使用 20% 的倍数:

  • is-four-fifths
  • is-three-fifths
  • is-two-fifths
  • is-one-fifth

is-four-fifths

Auto

Auto

is-three-quarters

Auto

Auto

is-two-thirds

Auto

Auto

is-three-fifths

Auto

Auto

is-half

Auto

Auto

is-two-fifths

Auto

Auto

is-one-third

Auto

Auto

is-one-quarter

Auto

Auto

is-one-fifth

Auto

Auto

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

12 columns system | 12网格系统 #

网格由 12 列组成，每个分区都有自己的尺寸

  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11

命名约定

每个修饰符都以 X列（X/12） 命名。如果你想使用 7 列布局（7/12），请使用 is-7。

is-2

1

1

1

1

1

1

1

1

1

1

is-3

1

1

1

1

1

1

1

1

1

is-4

1

1

1

1

1

1

1

1

is-5

1

1

1

1

1

1

1

is-6

1

1

1

1

1

1

is-7

1

1

1

1

1

is-8

1

1

1

1

is-9

1

1

1

is-10

1

1

is-11

1

Offset | 偏移 #

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

is-half
is-offset-one-quarter

is-three-fifths
is-offset-one-fifth

is-4
is-offset-8

is-11
is-offset-1 

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

Narrow column | 窄列 #

你可以使用 is-narrow 修饰符来 固定 某列的大小，其他列将填满剩余空间

Narrow column

这列只有 200px 宽.

Flexible column

这一列将占用剩余的可用空间。

<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-narrow-mobile
  • is-narrow-tablet
  • is-narrow-desktop

Made with Bulma
这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!