align-items-baseline 是文本基线对齐，非底部贴齐；其生效前提是父容器（如 .row）具备明确高度，否则因内容撑高导致视觉无变化；Bootstrap 5 支持响应式类如 align-items-md-baseline，但需避免类冲突并确保祖先元素有高度约束。
align-items-baseline 才是底部“基准线”对齐，不是 align-items-end；它让所有 .col 内容的文本基线（baseline）对齐，视觉上更接近“文字底部对齐”，但和“贴底”完全不同。
为什么 align-items-baseline 在断点下不生效？
根本原因和 align-items-end 一样：父容器 .row 缺少可参与对齐的垂直空间。Baseline 对齐仍依赖 Flex 容器的交叉轴空间 —— 如果 .row 高度仅由内容撑开，所有列基线天然就挨在一起，看不出对齐效果。
-
.row必须有明确高度（如vh-100、h-100或固定min-height），否则align-items-baseline计算值存在，但视觉无变化 - 若
.row包在.container里，要确保.container或其祖先也有高度（比如min-vh-100） -
align-items-baseline是 CSS 原生属性，Bootstrap 5 直接透出该类，无需额外引入
如何按断点启用 baseline 对齐？
Bootstrap 5 的响应式前缀直接支持：align-items-sm-baseline、align-items-md-baseline 等，它们只在对应断点及以上宽度生效。
- 写法示例：
<div class="row align-items-lg-baseline">→ 仅在lg（≥992px）及以上宽度启用基线对齐 - 断点顺序是递增的（
sm→md→lg→xl→xxl），不是“仅在此尺寸” - 不能混用冲突类（如
align-items-md-baseline align-items-xl-start），后写的会覆盖前一个，且无自动回退 - 若需“md 启用 baseline，xl 恢复默认顶部对齐”，得显式加
align-items-xl-start（因为默认值是stretch，不是start）
baseline 对齐 vs end 对齐：什么时候该用哪个？
align-items-baseline 关注的是文字基线（比如字母 “p”、“g” 的下沿），适合多列含文本/行内元素的场景；align-items-end 关注的是整个 .col 的盒模型底部，适合按钮、卡片等块级内容贴底。
- 常见错误：想让两列里的按钮都“踩到底部”，却用了
baseline→ 按钮本身没有基线概念，结果对齐失效或错位 - 真实场景举例：
<div class="col"><img src="..."><span>标题</span></div>和另一列纯文字，用baseline可让图片底部与文字基线对齐 - 性能影响几乎为零，但要注意：如果某列内容不含文本（如纯图标、空
<div>），它的基线位置可能不可预测，建议加font-size: 0或改用align-items-end
真正容易被忽略的是：baseline 对齐对字体排版敏感，不同字体、line-height、甚至是否设置了 vertical-align 都会影响最终位置；调试时别只看类名有没有加，先检查 computed 样式里 align-items 是否生效，再确认 .row 的 height 和 min-height 是否合理。
