justify-content-类必须搭配对应断点的d-flex类才生效，如justify-content-md-center需配合d-md-flex；align-content-仅在flex-wrap开启且容器有交叉轴剩余空间时有效；justify-content-evenly在三元素以上布局更均衡，但仅Bootstrap 5.3+支持。
justify-content-*类必须搭配对应断点的d-flex才能生效
光写justify-content-md-center没用，浏览器根本不会把它当 flex 对齐规则处理。因为justify-content-*只作用于已声明display: flex的容器，而 Bootstrap 不会自动帮你加——你得显式写出d-md-flex或d-lg-flex这类断点类。
常见错误是：class="justify-content-sm-between justify-content-lg-center"，但父容器没加d-sm-flex或d-lg-flex，结果小屏和大屏都走默认流式布局，对齐类完全被忽略。
- 想让 sm+ 横排且两端对齐 →
d-sm-flex justify-content-sm-between - 想让 lg+ 横排且居中 →
d-lg-flex justify-content-lg-center - 如果中间断层（比如没写 md 断点），sm 有效、lg 也有效，但 md 尺寸下可能回退到普通块级排列，视觉跳变
多断点连续覆盖时，顺序必须按断点升序写
Bootstrap 的响应式类靠 CSS 层叠优先级生效：后写的类在满足断点条件时会覆盖前面的同名属性。但这个机制只在断点连续、不跳跃的前提下稳定。
比如想实现「xs 左、sm 居中、lg 右」，写成justify-content-start justify-content-sm-center justify-content-lg-end是安全的；但如果写成justify-content-lg-end justify-content-sm-center，sm 断点以下（包括 xs）就只剩默认行为，且 lg 类在 sm 下无效，中间断层。
- 断点前缀顺序必须是
xs（无前缀）→sm→md→lg→xl→xxl - 别省略中间断点：需要 md 行为，就得显式写
justify-content-md-between，不能指望 sm 和 lg 自动“衔接” - 所有
justify-content-*类都遵循最小宽度生效原则，justify-content-md-center在 lg、xl 下依然生效，除非被更大的断点类覆盖
align-content-*在换行场景下容易失效的三个原因
align-content-*控制的是多行 Flex 项目在交叉轴上的分布，但它非常挑剔：只在真正发生换行 + 容器有交叉轴剩余空间时才起效。很多人加了align-content-center却没反应，问题通常出在这儿。
- 容器没启用换行：
flex-wrap没开 → 加flex-wrap或flex-wrap-md（注意也要配对应断点的d-md-flex） - 容器高度被内容撑满 → 没有“剩余空间”可分配 → 给父容器加
min-vh-100、h-75或固定style="height: 300px" - 子项没实际换行 → 临时加
border或背景色确认是否出现两行及以上；单行时align-content-*完全无效
justify-content-evenly和between在三元素以上时效果差异明显
两个元素时，justify-content-between和justify-content-evenly视觉一致；但三个及以上时，它们的间隙分配逻辑完全不同，直接影响布局重心。
-
justify-content-between：首项紧贴起点、末项紧贴终点，只分配项与项之间的间隙 → 中间项容易偏右（尤其按钮宽度不一） -
justify-content-evenly：首项前、项间、末项后间隙全部等宽 → 视觉更均衡，适合导航栏、工具栏等强调节奏感的场景 -
justify-content-evenly仅 Bootstrap 5.3+ 支持，旧版本会直接忽略该类，需检查 CDN 版本
真正容易被忽略的是：这些类都只影响 Flex 容器的**直接子元素**，嵌套一层 div 后再加justify-content-*就失效了——对齐必须从容器层开始控制，不是在哪都能加。
