七、响应式设计
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/
