Bulma的columns不自动换行是因为默认未启用响应式断点，需添加is-mobile类；hero全屏需加is-fullheight并确保父级无高度干扰；navbar-burger需手动添加JS切换is-active；自定义主题必须重新编译Sass或使用CSS变量。
为什么 Bulma 的 columns 不自动换行？
Bulma 的 columns 默认使用 Flexbox，但不会在小屏幕上自动堆叠——它只在你显式添加 is-mobile 类时才启用响应式断点行为。没加这个类，column 就会强行并排，哪怕屏幕只有 320px 宽。
常见错误是直接写：
.columns
.column
Hello
.column
World
结果在手机上文字溢出、横向滚动。正确做法是：
- 始终为
columns添加is-mobile（移动端默认堆叠） - 如需中屏以上才分栏，用
is-tablet或is-desktop -
column内容若含长单词或 URL，需额外加has-text-truncated或word-break: break-word
如何让 hero 区域真正全屏且居中？
Bulma 的 hero 默认高度不占满视口，文字也不绝对垂直居中——它只是上下 padding 大，靠 Flex 实现内容居中，但前提是父容器高度明确。
立即学习“前端免费学习笔记（深入）”；
要实现「真正全屏 + 垂直水平居中」，必须手动补两处：
- 给
hero加is-fullheight类（Bulma 提供，但很多人漏掉） - 确保其父级（比如
body或直接section）没有min-height冲突或padding干扰 - 如果背景图模糊或拉伸，别只设
background-image，补上：background-size: cover; background-position: center;
示例结构：
SEO Keyword Density
下载
SEO关键词密度优化与页面审计技能。使用场景：①提供页面路径与关键词进行SEO优化；②提升页面关键词密度；③提升搜索引擎排名；④进行SEO审计（meta标签、OG、hreflang等）。触发词：关键词密度、SEO优化、关键词优化等。
<section class="hero is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title">Welcome</h1>
</div>
</div>
</section>
navbar-burger 点击没反应？检查这三点
Bulma 的响应式导航栏依赖 JavaScript 控制开合，但框架本身**不包含 JS**。所以即使 HTML 结构完全正确，navbar-burger 也不会动。
必须自己补逻辑，最简方式是监听点击并切换 is-active 类：
document.addEventListener('DOMContentLoaded', () => {
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
const target = el.dataset.target;
const $target = document.getElementById(target);
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
});
容易踩的坑：
-
data-target值必须和目标navbar-menu的id完全一致（区分大小写） - 如果用了 Webpack/Vite，确保这段 JS 在 DOM 加载完后执行，不要放在
里直接运行 - 多个导航栏共存时，
querySelectorAll('.navbar-burger')会选中全部，上面代码已做兼容处理
自定义主题颜色时，$primary 改了但按钮没变？
Bulma 使用 Sass 变量控制主题，但仅修改 $primary 不足以让所有组件响应——很多组件（如 button、tag、notification）的颜色是通过 findColorInvert() 函数动态计算文字反色的。如果你只改变量，却没重新编译 Sass，CSS 文件还是旧的。
实操路径只有两条：
- 用 Sass 编译：引入
bulma/sass/utilities/initial-variables.sass→ 覆盖变量 → 再引入完整 Bulma - 用 CSS 自定义属性（现代方案）：覆盖 Bulma 的 CSS 变量，例如：
:root { --bulma-primary: #2a3942; }，但注意这仅对部分新版本支持，老版本无效
更隐蔽的问题：某些 UI 库（如 bulma-extensions）有独立配色逻辑，它们不读 Bulma 主变量，得单独配置。
