css 框架中的 Bulma_使用 Bulma 实现简洁的响应式布局_技术教程

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;

示例结构：


  
    
      Welcome

`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 主变量，得单独配置。