Bootstrap 5.3+ 才原生支持 justify-content-evenly，旧版无效；需确保父容器为 d-flex、子项未脱离文档流，且注意 Safari 兼容性与渲染抖动问题。
justify-content-evenly 在 Bootstrap 5.3+ 才真正可用
Bootstrap 5.3 起才原生支持 justify-content-evenly，旧版（如 5.2 或更早）CSS 文件里压根没这个类——哪怕你写了也无效。别查文档没写清楚的版本兼容表，直接看自己项目加载的 Bootstrap CSS 源码里有没有 .justify-content-evenly 定义。
- 用 CDN 的，确认链接指向的是
5.3.0+版本，例如https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css - 用 Sass 构建的，检查是否启用了
$enable-flex-utilities: true（默认开启），且未被覆盖 - 若必须兼容 5.2 及以下，别硬套
justify-content-evenly，改用mx-auto手动调中间项，或用媒体查询 +justify-content-around折中
evenly 和 between/around 的间距逻辑差异必须分清
justify-content-evenly 是让「每个元素边缘到容器边缘、以及元素与元素之间」的空白完全相等；justify-content-between 是只在「元素之间」均分空白，首尾贴边；justify-content-around 则是给每个元素「左右各一份等量 margin」，导致首尾到容器边距只有中间间隙的一半。
- 三按钮场景：
evenly→ 左按钮左空 = 左中空 = 中右空 = 右按钮右空 - 同场景用
between→ 左按钮左空 = 0，左中空 = 中右空 = 右按钮右空 = 0 - 同场景用
around→ 左按钮左空 = 左按钮右空 = 左中空 / 2，以此类推，首尾显得更挤 - 视觉上最“匀称”的就是
evenly，但 Safari 15.4 之前对evenly支持不全，需加@supports回退
父容器必须是 Flex 容器，且子项不能脱离流
写了 justify-content-evenly 却没反应？大概率是父容器没加 d-flex，或者子项用了 position: absolute、float、display: block 覆盖了 Flex 行为。
-
d-flex是前提，justify-content-evenly本身不触发 Flex 上下文 - 子项若设了
flex: none或flex-shrink: 0且内容超宽，可能把容器撑变形，导致 even 分布被破坏 - 响应式场景下，
justify-content-md-evenly只在 ≥768px 生效，小屏自动回退到无前缀类（即默认justify-content-start），别指望它“一直生效” - 嵌套 Flex 容器时，
evenly只作用于直系子项，孙子级需各自设对齐
移动端 Safari 下 even 间距偶尔跳变
部分 iOS 版本（尤其是 16.0–16.4）在 viewport 缩放或键盘弹出后，justify-content-evenly 计算会短暂失准，表现为按钮忽左忽右抖一下。这不是代码错，是渲染管线 bug。
- 临时缓解：给父容器加
transform: translateZ(0)强制 GPU 加速（用style="transform: translateZ(0)"） - 更稳方案：放弃
evenly，改用三个等宽flex-grow-1子项 +text-center内部居中，控制权更实在 - 别在
navbar或sticky-top区域重度依赖evenly，滚动时重排压力大，易卡顿
