Bulma基于Flexbox提供响应式网格布局，通过container、columns和column类实现基础结构，支持等宽或指定宽度的列布局。使用is-类可控制列宽，如is-3、is-half等，并可通过is--mobile、is-*-desktop等响应式类适配不同设备断点。结合is-vcentered、is-gapless或is-variable可调整对齐与间隙，多行布局自然换行，嵌套时需用columns包裹子列，无需自定义CSS即可快速构建跨设备兼容的现代网页布局。
使用 Bulma 实现响应式网格布局非常简单，因为它基于 Flexbox 构建，提供了强大的列（column）和行（container + columns）系统。你不需要写额外的 CSS，只需使用 Bulma 内置的类即可快速搭建适配手机、平板、桌面的响应式布局。
1. 基础结构：container + columns + column
Bulma 的网格由三部分组成：
- container：可选，限制内容宽度并居中
- columns：表示一行，是 column 的父容器
- column：实际的内容列，自动均分剩余空间
左侧内容右侧内容
在移动端会自动堆叠成上下排列，桌面端则并排显示。
2. 控制列宽：使用尺寸类
你可以通过 is-* 类精确控制每列宽度，支持 1 到 12 的栅格系统。
立即学习“前端免费学习笔记（深入）”；
-
is-half：占 6 列 -
is-one-third：占 4 列 -
is-two-thirds：占 8 列 -
is-full：占 12 列（整行） - 或使用数字类如
is-4表示占 4/12 宽度
侧边栏主内容区
3. 响应式断点控制
Bulma 支持按设备设置不同列宽，语法为 is-*-，断点包括：
-
mobile：仅手机 -
tablet：平板及以上 -
desktop：桌面及以上 -
widescreen：宽屏
栏目1栏目2栏目3
这样在手机上每列独占一行，在桌面端三列等宽并排。
4. 其他实用功能
-
gap 控制：默认有间距，可用
is-gapless去除，或is-variable is-4调整间隙大小 -
垂直对齐：用
is-vcentered垂直居中列内容 -
多行布局：多个
columns块自然换行
左边内容右边说明
基本上就这些。Bulma 的网格足够灵活，又能自动响应，适合大多数现代网页布局需求。不复杂但容易忽略细节，比如嵌套时要再用 columns 包裹子列。
