一个典型后台页面至少包含顶部导航栏、左侧菜单栏、主内容区和底部状态栏；其中navbar需配合has-navbar-fixed-top类与pt-6内边距防遮挡，sidebar可用aside+menu实现响应式折叠，主内容区须用section包裹并避免直接子元素为columns。
后台页面需要哪些核心区域？
一个典型后台页面至少包含：顶部导航栏（navbar）、左侧菜单栏（sidebar）、主内容区（section）和底部状态栏。Bulma本身不提供sidebar组件，但可通过columns + column + menu组合实现，无需额外JS。
- 顶部用
navbar固定定位（加is-fixed-top），品牌区放logo，右侧放用户头像或通知图标 - 左侧菜单建议用
menu组件（不是navbar-menu），包裹在aside里，配合is-hidden-desktop和is-hidden-touch控制响应式显隐 - 主内容区用
section+container包裹，避免撑满全屏；内部用columns分栏时，优先用is-two-thirds/is-one-third等语义化宽度类，别硬写width: 66.66% - 所有区域之间留空隙用
mt-4、pl-6等间距工具类，别依赖margin自定义
为什么直接套用navbar + columns会错位？
常见错误是把navbar和columns写在同一DOM层级，导致columns被navbar的position: fixed覆盖——内容从顶部开始渲染，文字被遮挡。
- 正确做法：给
body加has-navbar-fixed-top类，并确保主内容区有pt-6（对应navbar默认高度）或is-paddingless+ 手动padding-top -
columns必须包裹在section或div内，不能直接作为body子元素，否则Flexbox行为异常 - 左侧菜单若用
menu，需手动加is-active到当前项，Bulma不自动识别路由高亮——得靠Vue/React状态驱动，或简单用document.querySelector匹配location.pathname
表格、卡片、表单这些高频组件怎么快速落地？
后台最耗时的是数据列表和表单，Bulma提供开箱即用的table、card、field，但容易忽略细节适配。
- 表格务必套
table-container，否则小屏横向溢出；加is-striped is-hoverable提升可读性，别漏掉is-fullwidth让列宽自适应 - 卡片用
card+card-content+card-footer结构，标题用title而非h2，否则字号失控；操作按钮放card-footer-item里，自动居右对齐 - 表单字段用
field包裹control，input加is-fullwidth，select加is-fullwidth；多行文本用textarea并设rows="4"，别依赖CSS控制高度 - 按钮状态统一用
is-primary、is-danger等语义类，禁用时加is-disabled，别只改颜色
响应式折叠菜单要手写JS吗？
是，Bulma不内置JS，但只需4行就能搞定汉堡菜单切换——关键不是代码量，而是DOM绑定是否精准。
立即学习“前端免费学习笔记（深入）”；
- 确保
navbar-burger的data-target值等于目标navbar-menu的id，大小写、空格、引号都必须严格一致 - 监听
click事件后，只切换is-active类，不要show/hide——Bulma靠这个类控制display: flex和transform - 移动端菜单展开后，点击空白处收起需额外监听
document，但后台页面通常不需要，用户习惯点按钮关闭 - 如果用Vue，直接绑定
:class="{ 'is-active': menuOpen }"更稳妥，避免原生JS与框架冲突
html加has-navbar-fixed-top类，结果主内容永远被遮住——这个类名必须和navbar的is-fixed-top配对使用，缺一不可。 
