align-self-end 对 .col 无效是因为其父容器 .row 的 flex 上下文被破坏或高度缺失；应优先用 .row 的 align-items-end 实现整行底对齐，并确保 .row 有明确高度（如 vh-100），单列内部贴底可用 mt-auto 或 d-flex align-items-end。
align-self-end 加在 .col 上为什么没反应
因为 align-self-end 是 flex 项目（flex item）的属性，只在父容器是 flex 容器（display: flex 或 display: inline-flex）时才生效。bootstrap 的 .col 默认是块级元素，其父容器 .row 虽然是 flex 容器（bootstrap 5 中 .row 默认 display: flex），但前提是它没被其他样式覆盖（比如加了 float、position: absolute 或意外设为 display: block）。
常见失效场景：
-
.row被包裹在某个自定义组件里，该组件设置了display: grid或display: table，破坏了 flex 上下文 - 你检查的是开发者工具中
.col的 computedalign-self，但它显示为auto——说明父级没启用 flex，或 flex-direction 不匹配（比如父级是flex-row，交叉轴是垂直方向，align-self才管用；若父级被改成flex-column，那align-self就控制水平方向了） - 给
.col加了align-self-end，但该列内部内容高度小于父.row高度，而.row本身又没显式高度（如h-100或vh-100），导致“底部”没有空间可对齐
整行所有列统一底部对齐，该加在哪
直接加在 .row 上，用 align-items-end。
这是最常用也最省事的方式，它让所有 .col 子项沿交叉轴（垂直方向）对齐到 .row 底部。前提是 .row 有足够高度——否则对齐无从谈起。
- 必须确保
.row或其至少一个祖先有明确高度：推荐vh-100（占满视口高）、h-100（继承父高），或通过min-height+ 内容撑开（但min-height不足以触发align-items对齐） - 不要加在
.col上——那是控制列内部子元素的对齐，不是列之间的对齐 - 如果某列需要例外（比如其它列底对齐，唯独这一列顶对齐），再单独给它加
align-self-start
单个 .col 内部内容贴底，不用改 .row
给目标 .col 加 d-flex align-items-end，让它自己变成 flex 容器，再控制其子元素。
这个方案不依赖 .row 高度，适合侧边栏、卡片、广告位等局部对齐需求。
- 加
d-flex后，默认主轴是flex-row（水平排列），若原本是块级堆叠，需补flex-column - 更轻量的替代法：不改
.col的 display，直接给要贴底的子元素（如按钮）加mt-auto——它利用 margin 自动撑开上方空白，把目标“顶”到底部，且兼容性更好 - 注意
mt-auto只在 flex 容器中生效，所以仍需确保.col或其直接父容器是 flex（比如.card-body加了d-flex flex-column）
align-self-end 和 mt-auto 到底选哪个
看控制粒度和兼容性需求。
align-self-end 是标准 flex 属性，语义清晰，适合明确想控制“这个子项在父 flex 容器中如何对齐”的场景；mt-auto 是 Bootstrap 封装的 margin-top: auto，本质是利用 flex 的自动外边距机制，更轻量、更少侵入布局结构。
- 如果只是想让一个按钮/图标停在列底部，
mt-auto更稳——它不改变容器 display，也不影响其他子项的排列逻辑 - 如果列内有多个子元素，且你希望它们整体按某种规则对齐（比如全部右对齐+底对齐），那就用
d-flex align-items-end justify-content-end - 别混用：在同一个 flex 容器里，既加
align-items-end又给子项加align-self-end是冗余的；同理，mt-auto和align-items-end在同一层级作用于同一目标时，可能相互干扰
真正容易被忽略的点是：对齐永远依赖空间。没有高度上下文的容器，再准的类名也动不了内容位置。
