Bulma布局需避免层级混乱：is-flex仅用于直接弹性容器，父容器须有明确宽度；文本对齐修饰符不作用于块级子元素；修饰符叠加顺序影响样式权重；is-clipped需手动补white-space: nowrap才生效。
层级混乱时，is-flex 和 is-inline-flex 别乱套用
Flex 容器嵌套过深是 Bulma 里最常导致布局错位的原因。Bulma 的 is-flex 默认设为 display: flex，而父容器若本身不是块级或未清除浮动，子元素的 is-flex 可能被压缩、换行异常，甚至完全不生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只在直接需要弹性布局的容器上加
is-flex，避免“为了对齐”而在每层都加 - 父子都是 flex 容器时，确认父容器有明确宽度（比如
is-fullwidth或带max-width的 wrapper），否则子is-flex会按内容收缩 - 内联场景优先用
is-inline-flex，比如按钮组、标签云——它不会独占一行，但依然支持is-justify-content-center这类修饰符 - 遇到子项堆成一列却想横排，先检查父容器是否意外加了
flex-direction: column（Bulma 某些组件如hero默认就是 column）
has-text-centered 对齐失效？先看它作用在谁身上
Bulma 的文本对齐修饰符（has-text-centered、has-text-right）只影响自身文本和行内子元素，对块级子元素（如 box、card）无效。很多人把它加在父容器上，结果标题居中了，但里面的卡片还是左贴边。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 要居中块级子元素，用
is-flex is-justify-content-center或has-text-centered+is-inline-block组合 -
has-text-centered在level或media内部慎用——这些组件自带结构约束，强行加可能破坏语义流 - 响应式对齐要拆开写：
has-text-centered-touch has-text-left-desktop，别指望单个类自动适配
Modifiers 堆叠顺序影响最终效果
Bulma 的修饰符不是独立开关，而是 CSS 类，叠加顺序决定层叠权重。比如 is-primary is-outlined is-light 同时存在时，is-light 的背景色会覆盖 is-primary 的背景色，但 is-outlined 的边框又依赖 is-primary 的颜色变量——顺序错了，颜色就断链。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 颜色类（
is-primary、is-success）尽量放在最前 - 样式类（
is-outlined、is-inverted、is-rounded）放中间 - 尺寸/状态类（
is-small、is-loading）放最后 - 自定义主题变量改了
$primary，但忘了重编译 CSS？那is-primary类实际没变——Bulma 的 modifiers 是编译时生成的，不是运行时计算
用 is-clipped 截断文字前，先确认容器有明确宽高
is-clipped 实际是 overflow: hidden + text-overflow: ellipsis 的快捷类，但它**不自动触发省略号**。必须同时满足：块级容器、固定宽高、white-space: nowrap、overflow: hidden ——而 Bulma 只提供了后两者。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给容器加
is-clipped后，手动补white-space: nowrap（或用is-inline类替代） - 多行截断不能靠
is-clipped，得用-webkit-line-clamp配合自定义类 - 在
table单元格里用is-clipped要小心：td 默认table-cell显示模式，white-space: nowrap可能撑破表格布局
Modifier 看似简单，但 Bulma 把样式逻辑分散在多个类里，组合时稍不注意，CSS 层叠和继承就会绕晕人。最常被忽略的是：所有修饰符都依赖 Bulma 基础类（比如 button、title）已存在，单独加 is-primary 没用。
