使用Bulma的.columns容器可自动实现等高列布局，子元素.column会随最高列等高，支持宽度类如is-one-third控制比例，并可通过is-gapless去除间隙。
用 Bulma 实现等高列布局非常简单，不需要额外写复杂的 CSS。Bulma 内置的 Flexbox 网格系统（基于 .columns 和 .column）天然支持等高列，只要把多个 .column 放在同一个 .columns 容器中即可。
使用 .columns 创建等高列
Bulma 的 .columns 是一个 Flex 容器，默认使用 Flexbox 布局，它的子元素 .column 会自动拉伸到相同高度。
<div class="columns">
<div class="column">
<p>这是第一列的内容。</p>
<p>内容较短。</p>
</div>
<div class="column">
<p>这是第二列的内容。</p>
<p>内容比较长，会撑高整个行。</p>
<p>多几段文字来测试高度是否一致。</p>
<p>是的，它们会保持等高。</p>
</div>
<div class="column">
<p>第三列，即使内容少，也会和最高的一列一样高。</p>
</div>
</div>
上面代码中，三列的高度会自动对齐，以最高的那一列为准。
控制列宽比例
你可以通过给 .column 添加宽度类来设置不同比例的列，比如：
立即学习“前端免费学习笔记（深入）”；
-
is-one-third：占 1/3 宽度 -
is-half：占一半 -
is-four-fifths：占 4/5 - 或者不设，让 Flex 自动分配空间
示例：两列布局，左侧窄，右侧宽
<div class="columns">
<div class="column is-one-quarter">
<p>侧边栏</p>
</div>
<div class="column">
<p>主内容区，更宽，且高度与侧边栏一致。</p>
</div>
</div>
去除列间间隙（可选）
Bulma 默认在列之间加入间隙（gap）。如果你想要紧凑布局，可以添加 is-gapless 类：
<div class="columns is-gapless"> <div class="column">没有间距的列</div> <div class="column">高度依然相等</div> </div>
基本上就这些。Bulma 的 Flexbox 设计让等高列变得非常自然，不需要 JavaScript 或 hack 样式。只要结构正确，等高效果自动生效。
