Bulma 框架网格体系(原理)

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

有兴趣的同学可以和 bootstrap 的网格布局对比对比。

<div class="columns">
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="column">Third column</div>
  <div class="column">Fourth</div>
</div>
<!-- ：www.xttblog.com -->

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

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

• 四分之三：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

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

• 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

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

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

更多布局请参考官方文档。

： » Bulma 框架网格体系(原理)