Bulma通过container、columns网格和响应式类实现响应式布局。使用container控制内容宽度，结合mobile、tablet、desktop等断点，通过is-half-tablet、is-one-third-desktop等类设置列宽，利用is-hidden-mobile、is-visible-desktop等控制元素显示，配合is-multiline和is-gapless调整布局，无需JavaScript即可构建多端适配的页面。
Bulma 是一个基于 Flexbox 的现代 CSS 框架，它原生支持响应式布局，无需 JavaScript。实现响应式的关键在于使用其内置的网格系统和响应式工具类。下面介绍几种常用方法。
使用 container 和 responsive breakpoints
Bulma 推荐将内容包裹在 container 中，以控制最大宽度并居中内容。container 会根据屏幕尺寸自动调整宽度。
常见断点如下：- mobile：小于 768px
- tablet：769px ~ 1023px
- desktop：1024px 及以上
- widescreen：1216px ~ 1407px
- fullhd：1408px 及以上
通过添加如 is-hidden-mobile、is-flex-desktop 等类，可以针对不同设备控制元素显示或布局方式。
利用 columns 实现响应式网格
Bulma 的 columns 系统基于 Flexbox，能自动换行并对齐子列。默认情况下，在移动设备上堆叠，平板及以上横向排列。
立即学习“前端免费学习笔记（深入）”；
示例代码：
<div class="columns"> <div class="column is-half-tablet is-one-third-desktop">内容1</div> <div class="column is-half-tablet is-one-third-desktop">内容2</div> <div class="column is-full-tablet is-one-third-desktop">内容3</div> </div>
说明：在手机上每列占满一行；在 tablet 上前两列并排（各占一半），第三列独占；desktop 上三列等宽并列。
控制列宽与对齐
使用 is-1 到 is-12 设置固定列宽（相对于12列网格）。也可以结合响应式前缀实现动态变化。
-
is-three-quarters：占 9/12 宽度 -
is-offset-2：左侧留空 2 列 -
is-gapless移除列间距，is-multiline允许多行布局
比如：class="column is-12-mobile is-6-tablet is-4-desktop" 表示在手机上全宽，tablet 占一半，desktop 占三分之一。
隐藏与显示元素
通过响应式可见性类，可控制元素在特定设备是否显示。
-
is-hidden-mobile：仅在手机隐藏 -
is-hidden-tablet-only：仅在 tablet 隐藏 -
is-visible-desktop：只在 desktop 显示
这适合为不同设备提供不同的内容展示逻辑，比如隐藏移动端导航菜单中的次要链接。
基本上就这些。Bulma 的响应式设计靠类名组合完成，结构清晰，不需要写额外 CSS。只要理解断点划分和列行为，就能快速搭建适配多端的页面布局。
