Bootstrap中控制Flex子元素对齐需在父容器加d-flex及justify-content-（主轴）或align-items-（交叉轴）类；单个子元素用align-self-*覆盖；失效主因是父容器未启用Flex或子元素脱离文档流。
怎么用 Bootstrap 控制 Flex 子元素在主轴（水平）对齐
主轴对齐靠 justify-content-* 类，必须加在父容器上，且父容器得是 flex 容器（即有 d-flex）。它只管子元素在水平方向怎么排——左贴边、右贴边、居中、等间距分布，都由它决定。
-
justify-content-start：默认左对齐（等价于没写） -
justify-content-end：全部右对齐 -
justify-content-center：所有子项水平居中（不是“让某个子项居中”，而是整体居中） -
justify-content-between：首尾贴边，中间等距；注意：只有 2 个以上子元素时才看出效果 - 响应式可用前缀，如
justify-content-md-center，但需确保对应断点下d-md-flex也生效
怎么让子元素在交叉轴（垂直）方向底部对齐
交叉轴对齐看 align-items-*，同样只作用于父容器，影响所有直接子元素。要底部对齐，首选 align-items-end，不是 align-items-baseline ——后者按文字基线对齐，当子元素高度不一致（比如一个带图标、一个纯文本），视觉上根本不到底。
- 必须保证父容器是
d-flex，否则类无效 - 如果父容器是 Bootstrap 的
.col，直接加d-flex align-items-end即可，不用额外包一层 div - 子元素若本身是块级且未设高，
align-items-end仍有效；但若子元素用了flex-shrink: 1（Flex 默认行为），可能被压缩变窄，建议加w-100或flex-shrink-0锁定宽度
只想单独调某个子元素的垂直对齐，怎么办
用 align-self-* 类，加在目标子元素自身上，它会覆盖父容器的 align-items 设置。比如父容器设了 align-items-center，但你想让第二个按钮沉到底部，就给它加 align-self-end。
- 可选值和
align-items一致：start/end/center/baseline/stretch - 这个类对
display: flex的直系子元素才生效，嵌套两层后加就没用 - 别误写成
self-align或align-item-self，Bootstrap 只认align-self-*
为什么加了类却没反应？常见失效原因
Flex 工具类不是“魔法开关”，它依赖严格的层级和 display 规则。最常踩的坑是：类写了，但父容器没真正变成 Flex 容器。
- 漏掉
d-flex（或响应式变体如d-md-flex）——其他 justify/align 类全失效 - 父容器是
.row，但没意识到.row默认就是display: flex，此时加d-flex是冗余的；但若你把它改成div，就必须手动加d-flex - 子元素用了
float或position: absolute，会脱离 Flex 流，align 类对其无效 - 在表格（
table）内部强行套 Flex 类——表格元素有自己的渲染规则，Flex 工具类基本不起作用
