align-self-*类必须带sm/md/lg/xl/xxl断点前缀才响应式生效，不加前缀则全局生效；仅对.row直系子元素.col有效，且.row需为flex容器并具明确高度。
align-self-*类必须带断点前缀才生效
Bootstrap 的 align-self- 类（如 align-self-center）默认只在所有断点生效，**没有断点修饰时不会响应式切换**。想让某列在小屏顶部对齐、大屏居中，不能只写 align-self-center，必须加断点前缀——比如 align-self-md-center 或 align-self-lg-end。
可用断点只有 sm/md/lg/xl/xxl 五档，没有 xs 前缀（最小从 sm 开始），也没有 align-self-auto 这种值。
-
align-self-sm-start：≥576px 时该列顶部对齐 -
align-self-lg-center：≥992px 时该列整列在行内垂直居中（注意：是列整体居中，不是列内内容） - 多个断点可叠加，如
align-self-sm-start align-self-md-center align-self-lg-end，但需注意后写的覆盖前写的
父容器 .row 必须保持 Flex 上下文且有高度
断点类再准，align-self- 也得有作用对象。它只对 .row 的**直系子元素**（即 .col）生效，前提是 .row 是 flex 容器，且有明确高度。
常见失效场景：
-
.row被包裹在某个自定义组件里，该组件设了display: grid或display: block，直接破坏 flex 上下文 -
.row高度仅由内容撑开（比如只有两行文字），此时无论align-self-lg-center还是align-self-lg-end都看不出效果——没空间可对齐 - 用了
min-height但没配vh-100或h-100，浏览器不认为这是“可用交叉轴空间”
推荐写法：<div class="row h-100"><div class="col align-self-lg-center">…</div></div>，并确保其祖先（如 .container）也加了 h-100。
单列内部内容垂直对齐别依赖 align-self-
align-self- 控制的是列在行内的位置，**不是列内文字或按钮的对齐方式**。如果目标是让某一列里的按钮贴底、文字居中，就不能只给 .col 加 align-self-lg-end，而要让它自己变成 flex 容器：
- 加
d-flex flex-column justify-content-center：列内内容垂直居中（主轴为 column，justify-content管上下） - 加
d-flex align-items-end：列内内容右对齐（主轴为 row，默认，align-items管上下） - 更轻量方案：给要贴底的子元素（如
<button>）加mt-auto，但前提是该子元素的**直接父容器是 flex 容器**（比如.col或.card-body）
响应式对齐容易忽略的兼容性细节
断点类生效的前提是 Bootstrap CSS 正常加载，且没被其它样式覆盖。实际调试时最容易卡住的点不在类名拼写，而在：
- DevTools 中检查
.col的 computedalign-self值，如果是auto，说明父级.row没启用 flex，或被重写了display - 断点类只在对应宽度及以上生效，比如
align-self-md-center在sm（ - 如果列在某断点被
d-none隐藏，.row高度会重算，可能导致其他未隐藏列的对齐“跳变”，需配合min-height锁定底线
真正起效的从来不是类名本身，而是那个有高度的、没被破坏的 flex 容器上下文。
