bootstrap 5 默认关闭响应式 flex 类（$enable-responsive-flexbox: false），故 flex-sm-row 等无效；需启用该变量或改用 d-flex + 媒体查询方案。
为什么直接加 flex-sm-row 没反应
因为 Bootstrap 5 预编译的 CSS 文件默认关闭了响应式 Flex 工具类——$enable-responsive-flexbox 这个 Sass 变量默认是 false。你看到的 flex-row、justify-content-center 等类生效，是因为它们属于“非响应式基础类”；但所有带断点前缀（如 -sm、-md）的 Flex 类，必须显式启用支持。
实操建议：
- 若用 Sass：在
@import "bootstrap"之前，定义$enable-responsive-flexbox: true; - 若用 CDN 或官方 dist CSS：别试
flex-md-column，它根本不存在，浏览器会静默忽略 - 替代写法更可靠：用
d-flex+ 媒体查询容器包裹，例如<div class="d-flex"><div class="d-md-flex flex-md-column">...</div></div>
col 和 d-flex 混用时子项不等宽
col 类本身依赖 row 的负 margin 和 flex 计算逻辑，一旦脱离 row 容器（比如直接放在 card-body 或自定义 d-flex 里），它的 flex: 0 0 auto 就容易失效，导致宽度由内容撑开而非均分。
实操建议：
- 想让子项自动等宽且可控，放弃
col，改用flex-fill：父容器加d-flex，子项加flex-fill，无需指定断点 - 若必须用
col，确保父级同时有row和flex-nowrap（否则小屏下仍会折行） - 注意
col在d-flex容器中会继承margin-left: -0.75rem（来自row），没row就没这个重置，需手动清margin
自定义 Flex 工具类要改 Sass 变量还是直接写 CSS
Bootstrap 的 Flex 工具类（如 align-items-center）由 utilities/_flex.scss 生成，其输出受 $utilities map 控制。直接覆盖或新增类，推荐改 Sass 而非硬写 CSS，否则易与响应式逻辑脱节。
实操建议：
- 在自定义 Sass 文件中，扩展
$utilities，例如追加：$utilities: map-merge($utilities, ("flex-shrink-0": map-merge(map-get($utilities, "flex-shrink-0"), ("values": (0: 0))))); - 避免用
!important覆盖，优先通过调整$utilities的class和property字段控制输出 - 如果只是临时加一两个类（比如
d-grid），直接写 CSS 更快，但记得用@media手动补响应式断点，Sass 不会帮你生成
align-items-center 垂直居中却截断内容
这是最常被忽略的前提条件：align-items-center 只作用于交叉轴（cross axis），而它需要父容器有明确的高度参照。没有 height 或 min-height，容器高度由内容决定，“居中”就无从谈起。
实操建议：
- 父容器必须设
min-height: 100vh或具体像素值；纯d-flex align-items-center对无高容器无效 - 移动端 Safari 下
100vh会因地址栏缩放错乱，换用100dvh（Chrome/Firefox/Safari 16.4+ 支持） - 子元素若含
position: absolute，它已脱离 flex 流，align-items对它完全不起作用
col 不是万能弹性单元、align-items 不等于“让里面所有东西都居中”。改 Sass 变量比硬写 CSS 更可持续，但前提是理解它怎么生成——否则新加的类可能在 md 断点下压根不出现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
