三、网格体系

Bulma 的网格体系基于 Flex 布局，写起来非常容易。最简单的用法就是使用columns指定容器，使用column指定项目。

三、网格体系 - 图1

  2. <div class="columns">
  3.   <div class="column">First column</div>
  4.   <div class="column">Second column</div>
  5.   <div class="column">Third column</div>
  6.   <div class="column">Fourth</div>
  7. </div>

屏幕宽度大于 768px 时，所有项目平铺，平分容器的宽度；宽度小于等于 768px 时，所有项目变成垂直堆叠。

三、网格体系 - 图2

以下的修饰类用来指定项目的宽度。

  • 四分之三：is-three-quarters
  • 四分之一： is-one-quarter
  • 三分之二：is-two-thirds
  • 三分之一：is-one-third
  • 二分之一：is-half
  • 五分之四：is-four-fifths
  • 五分之三：is-three-fifths
  • 五分之二：is-two-fifths
  • 五分之一：is-one-fifth

三、网格体系 - 图3

此外，还有一些修饰类也非常有用。

  • is-narrow：网格的宽度由内容的宽度决定
  • is-centered：网格内容居中对齐
  • is-gapless：网格之间没有间距

Bulma 也支持12网格体系。

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

三、网格体系 - 图4

如果要指定某个网格偏移，可以用is-offset-修饰类。

  • is-offset-one-quarter
  • is-offset-one-fifth
  • is-offset-8
  • is-offset-1