基于Flexbox的列(Columns)

构建响应式列(responsive columns)的简单方式

使用 Bulma 创建一个 响应式列布局是非常简单的:

  1. 添加一个 columns 容器
  2. 根据你的需要在其中添加多个 column 元素

无论有多少列，他们的宽度将会 均分.

First column

Second column

Third column

Fourth column

<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 column
  </div>
</div>