Bulma 的 columns 在手机上并排溢出，主因是漏加 is-mobile 类且缺失 viewport meta 标签；正确写法需显式添加 is-mobile，并确保 head 中有 。
columns 在手机上强行并排、文字溢出？
Bulma 的 columns 默认只在 tablet（769px+）及以上才横向排列，手机（mobile）下本该堆叠——但很多人写了结构却没生效，根本原因是漏了 is-mobile 类。Bulma 不是“自动响应”，而是靠显式类触发断点行为。
- 错误写法：
<div class="columns"> <div class="column">A</div> <div class="column">B</div> </div>→ 手机上两列强行挤在一起，长文本直接溢出 - 正确写法：必须加
is-mobile——<div class="columns is-mobile"> <li>若只想在 tablet+ 分栏，手机/小屏堆叠，就别加 <code>is-mobile，改用is-tablet或is-desktop控制起始断点 - 含 URL 或长单词时，单靠
is-mobile不够，还得给.column加has-text-truncated或 CSSword-break: break-word - 没有这个标签，浏览器会按 980px 宽度模拟桌面视口，所有
@media (max-width: 768px)规则压根不匹配 - 它必须放在
里，且不能被其他 meta 覆盖或重复定义 - CDN 引入 Bulma 时最容易忽略这点，尤其从示例复制代码时漏掉整行 meta
-
is-half= 全设备占 6/12 → 错误场景：手机上两列并排溢出 -
is-half-tablet is-one-third-desktop= tablet 起分两栏，desktop 分三栏，mobile 自动堆叠（因未指定 mobile 类，默认回退为is-full） - 想让某列在 mobile 全宽、tablet 半宽、desktop 三分之一宽，就得写全：
class="column is-full-mobile is-half-tablet is-one-third-desktop" - 注意 Bulma 断点阈值：mobile 是
max-width: 768px，tablet 是769px–1023px，别拿像素值硬套设计稿的“768px 分界” - 加
is-multiline到外层.columns才能换行；不加就永远单行，哪怕内容溢出 -
is-gapless会移除列间距，常用于图片网格或卡片无缝拼接，但容易误以为它能解决换行问题——它和换行无关 - 嵌套时，内层
.columns若没设is-mobile，其子列在手机上仍可能并排，需逐层检查
viewport meta 标签缺失导致所有断点失效
哪怕你写了 is-mobile、is-desktop 全套类，页面在 iOS Safari 或安卓 WebView 里依然像桌面端一样渲染——十有八九是缺了 <meta name="viewport" content="width=device-width, initial-scale=1.0">。
column 宽度类没按断点前缀组合使用
写 is-half 看似能分两栏，但它在所有设备上都占一半——手机上并排两个半宽列，必然撑破屏幕。真正响应式得用带断点前缀的类，比如 is-half-tablet。
嵌套 columns 时父容器没设 is-multiline 或 is-gapless
多行布局（比如 4 个 .column 在 tablet 上要排成 2×2）需要明确告诉 Flexbox “允许换行”，否则默认 flex-wrap: nowrap，所有列死扛在一行。
立即学习“前端免费学习笔记（深入）”；
is-mobile 这两个点同时存在——结果就是“明明按文档写了，怎么还是不响应”。先查 meta，再查类名，比反复调样式快得多。
