为什么Bulma CSS响应式列布局不生效？-css教程-PHP中文网

Bulma 的 columns 在手机上并排溢出，主因是漏加 is-mobile 类且缺失 viewport meta 标签；正确写法需显式添加 is-mobile，并确保 head 中有。

为什么bulma css响应式列布局不生效？

columns 在手机上强行并排、文字溢出？

Bulma 的 columns 默认只在 tablet（769px+）及以上才横向排列，手机（mobile）下本该堆叠——但很多人写了结构却没生效，根本原因是漏了 is-mobile 类。Bulma 不是“自动响应”，而是靠显式类触发断点行为。

错误写法：A B → 手机上两列强行挤在一起，长文本直接溢出
正确写法：必须加 is-mobile ——
若只想在 tablet+ 分栏，手机/小屏堆叠，就别加 is-mobile，改用 is-tablet 或 is-desktop 控制起始断点


含 URL 或长单词时，单靠 is-mobile 不够，还得给 .column 加 has-text-truncated 或 CSS word-break: break-word

viewport meta 标签缺失导致所有断点失效
哪怕你写了 is-mobile、is-desktop 全套类，页面在 iOS Safari 或安卓 WebView 里依然像桌面端一样渲染——十有八九是缺了 。

没有这个标签，浏览器会按 980px 宽度模拟桌面视口，所有 @media (max-width: 768px) 规则压根不匹配
它必须放在  里，且不能被其他 meta 覆盖或重复定义
CDN 引入 Bulma 时最容易忽略这点，尤其从示例复制代码时漏掉整行 meta

column 宽度类没按断点前缀组合使用
写 is-half 看似能分两栏，但它在所有设备上都占一半——手机上并排两个半宽列，必然撑破屏幕。真正响应式得用带断点前缀的类，比如 is-half-tablet。

											
												
												
													CSS婚礼策划服务机构宣传网站模板
													CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
												
												下载
												
											
										


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 分界”

嵌套 columns 时父容器没设 is-multiline 或 is-gapless
多行布局（比如 4 个 .column 在 tablet 上要排成 2×2）需要明确告诉 Flexbox “允许换行”，否则默认 flex-wrap: nowrap，所有列死扛在一行。

加 is-multiline 到外层 .columns 才能换行；不加就永远单行，哪怕内容溢出

is-gapless 会移除列间距，常用于图片网格或卡片无缝拼接，但容易误以为它能解决换行问题——它和换行无关
嵌套时，内层 .columns 若没设 is-mobile，其子列在手机上仍可能并排，需逐层检查



实际项目里最常卡住的不是语法写错，而是 viewport 缺失 + columns 漏 is-mobile 这两个点同时存在——结果就是“明明按文档写了，怎么还是不响应”。先查 meta，再查类名，比反复调样式快得多。