.align-self-end对.col无效的根本原因是父容器.row缺乏明确高度，导致无空间可对齐；需确保.row有height/vh值、.col为.row直系子元素、解除align-items:stretch约束，并注意响应式类仅支持align-items-前缀。
align-self-end加在.col上没反应，根本原因是父容器没高度
它不是“失效”，而是没空间可对齐。Bootstrap 5 的 .row 默认是 display: flex，align-self-end 确实能作用于 .col，但前提是 .row 在交叉轴（垂直方向）有明确高度——否则浏览器连“底部”在哪都不知道。
常见表现：加了 align-self-end，内容还是顶着上边；开发者工具里 align-self 显示为 auto；.row 的 computed height 是 fit-content 或很小的值。
- 给
.row加vh-100（占满视口高）或h-100（继承父高），是最直接的验证方式 - 如果
.row套在.container里，记得.container也要加h-100或min-vh-100，否则高度传不下来 -
min-height不够——Flex 的align-items/align-self只响应height或vh类，不响应min-height
它只对.row的直系子元素生效，嵌套一层就彻底失效
如果你写了类似 <div class="row"><div><div class="col align-self-end">...</div></div></div>，那 align-self-end 完全不会起作用——它只认 .row 的**直接子元素**，中间多一个 <div> 就断掉了 Flex 上下文。
<ul>
<li>检查 DOM 结构，确保 <code>.col 是 .row 的第一层子节点
align-self-end 加在按钮、卡片或文字上，它必须加在 .col 这个容器本身<div class="col"><button class="align-self-end">Submit</button></div> —— 这里 button 不是 .row 的子项，无效align-self-end 被 align-items: stretch 暗中覆盖
默认情况下，.row 的 align-items 是 stretch，它会让所有 .col 拉伸填满整行高度。这时即使你给某个 .col 加了 align-self-end，它的内容也会被“拉高”，再在那个拉高的框里贴底——视觉上几乎看不出变化。
- 临时加
outline: 1px solid red到.col，看它是否真被拉满整行高度 - 想让
align-self-end显效，可以给该列加align-self-end min-h-0（Bootstrap 5.3+）或min-height: 0，解除 stretch 的隐式约束 - 更稳妥的做法是：整行统一用
align-items-end，而不是单列加align-self-end——除非你确实需要混合对齐
响应式写法写错，或者断点没生效
想在大屏底对齐、小屏顶对齐？不能写 align-self-sm-start align-self-lg-end——align-self-* 类不支持响应式断点，只有 align-items-* 支持。
- 正确响应式写法是加在
.row上：align-items-sm-start align-items-lg-end - 如果非要单列响应式底对齐，得手动写媒体查询，或用 JS 切换类名
- 断点类名必须用标准前缀：
sm、md、lg、xl、xxl，没有xs或auto
align-self-end，但忘了给 .row 所在的整个布局链补高度——从 html、body 开始，到 .container、再到 .row，缺一不可。否则它永远只是一行“刚好包住内容”的弹性盒子，没有对齐的余地。
