七、响应式设计

7.1 断点系统
Bulma定义了5个响应式断点：

7.2 响应式容器

<!-- 固定宽度容器，在桌面端居中，有最大宽度限制 -->
<div class="container">内容</div>

<!-- 全宽容器 -->
<div class="container is-fluid">全宽内容</div>

<!-- 限制最大宽度（平板及以下全宽） -->
<div class="container is-max-tablet">在平板尺寸下达到最大宽度</div>
<div class="container is-max-desktop">在桌面尺寸下达到最大宽度</div>

7.3 响应式文本对齐

<p class="has-text-centered-touch">触摸屏设备居中</p>
<p class="has-text-left-desktop">桌面端左对齐</p>
<p class="has-text-right-widescreen">宽屏右对齐</p>

八、常见问题与解决方案

8.1 样式不生效
问题：引入Bulma后页面没有样式。

解决方案：

检查CDN链接是否正确，确认Network面板中bulma.min.css状态码为200

确认viewport meta标签已添加

检查类名拼写是否正确

8.2 栅格列不排成一行
问题：column元素垂直堆叠而非水平排列。

原因：columns默认只在平板及以上设备启用Flex布局，移动端自动堆叠。

解决方案：

<!-- 添加is-mobile强制移动端也水平排列 -->
<div class="columns is-mobile">
  <div class="column">列1</div>
  <div class="column">列2</div>
</div>

8.3 按钮样式变灰、hover无反应
问题：自定义按钮颜色后，悬停效果失效。

原因：光有.button类只是重置默认样式，不提供主题色。自定义颜色需覆盖整套CSS变量。

解决方案：

// 在custom.scss中覆盖变量
$primary: #2a5dc4;

8.4 汉堡菜单不工作
问题：移动端点击汉堡菜单按钮没有反应。

原因：Bulma的navbar需要手动控制汉堡菜单的展开/收起，不自带JS逻辑。

解决方案：

// 必须自己实现这个JS
document.addEventListener('DOMContentLoaded', () => {
  const burger = document.querySelector('.navbar-burger');
  const menu = document.querySelector(`#${burger.dataset.target}`);

  burger.addEventListener('click', () => {
    burger.classList.toggle('is-active');
    menu.classList.toggle('is-active');
  });
});

8.5 CSS体积过大
问题：使用Bulma后CSS文件体积较大。

解决方案：按需导入组件，只引入实际使用的模块。
来源：
https://unbgv.cn/