bulma固定导航栏遮盖内容需同步添加has-navbar-fixed-top类到html元素；columns在手机横排须显式加is-mobile；grid中main滚动失效要设min-height:0并确保高度基准明确。
直接用 Bulma 搭后台，不是“套个模板就完事”，而是得先理清三件事：布局怎么稳住、导航怎么不遮内容、响应式怎么不崩。否则很容易卡在“样式没生效”“侧边栏消失”“手机上一团乱”这种问题里。
为什么 is-fixed-top 一加内容就被盖住？
固定定位的导航栏脱离文档流，但 Bulma 不会自动给页面内容“腾位置”。你必须手动同步加辅助类：
- 给
加has-navbar-fixed-top（不是） - 如果用了
is-fixed-bottom，对应加has-navbar-fixed-bottom - 若同时有顶部和底部固定栏，得加
has-navbar-fixed-top has-navbar-fixed-bottom
漏掉任意一个，<section></section> 或 <main></main> 的顶部就会被遮住——这不是 CSS 写错了，是 Bulma 的约定行为。
columns 在手机上堆叠，怎么让它横排？
Bulma 的 columns 默认只在 tablet（≥769px）及以上才横排，这是设计，不是 bug。想在手机也横排，必须显式加 is-mobile：
<div class="columns is-mobile"> <div class="column">菜单</div> <div class="column">主区</div> </div>
常见错误：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 只写
<div class="column">，没包 <code>columns容器 → 列宽失效，变成普通块级元素 - 嵌套
columns时没加is-mobile→ 内层在手机仍堆叠 - 用
is-4等宽度类总和超 12 → 不会自动换行，需配合is-multiline -
Main元素本身必须加min-height: 0 - 如果
Main里还嵌了 Flex 或另一个 Grid，它的直接子容器也要加min-height: 0 - 容器得有明确高度基准，比如
height: 100vh或从 Vue/React 父组件传入高度 - 别只写
overflow: auto，横向溢出可能意外截断表格或工具栏，优先用overflow-y: auto - 该改：
css/admin.css（主题色、间距）、templates/admin.html（增删卡片/表格） - 慎改：
bulma.min.css—— 直接修改它等于放弃后续升级能力；应通过变量覆盖或 Sass 重编译 - 别动：
node_modules/bulma里的源文件 —— npm 更新会覆盖，所有定制应放在项目级 SCSS 中导入并覆盖变量 - 路径引用必须对：比如
<link rel="stylesheet" href="css/admin.css">，如果实际路径是assets/css/admin.css，就得同步改 HTML 或构建配置
Grid 布局下 Main 区域滚动失效怎么办？
很多人写了 overflow-y: auto 却没滚动，根本原因不是 CSS 写错，而是 Grid 子项默认有 min-height: auto，把父容器撑开了。解决方式很具体：
IE11 不支持 fr 单位，要用回退写法：grid-template-rows: 60px calc(100vh - 60px) auto，注意 calc() 里运算符两侧必须有空格。
用 Bulma 模板时，哪些文件真要改，哪些不能碰？
模板项目（如 bulma-templates 或 admin-one-bulma-dashboard）结构清晰，但改错地方容易白忙：
真正卡住人的，往往不是 Bulma 多难，而是这些细节点没对齐：HTML 类名拼写、父容器 display 设置、min-height 抑制、辅助类同步。它们不报错，但让整个布局“看起来不对劲”。
