justify-content-around 和 space-evenly 的间距逻辑本质不同：around 将剩余空间分为 2n 份（n 为子项数），首尾间隙小；evenly 分为 n+1 份，所有间隙（含首尾）相等。Bootstrap 5.3+ 才原生支持 evenly，旧版需用 @supports 渐进增强，动态项推荐升级或改用 Grid。
justify-content-around 和 evenly 的间距模型完全不同
它们不是“差不多”，而是数学上完全不同的分配逻辑。关键看容器剩余空间怎么切分：space-around 把空间切成 2n 份（n 是子项数），每项左右各占 1 份；space-evenly 则切成 n+1 份，所有间隙（包括首尾）完全相等。
3 个按钮时：
– justify-content-around：左边缘空 1 份，左中空 2 份，中右空 2 份，右边缘空 1 份
– justify-content-evenly：左边缘空 1 份，左中空 1 份，中右空 1 份，右边缘空 1 份
视觉上，around 让首尾显得“被挤向边缘”，evenly 才是真正对称。
Bootstrap 5.3+ 才原生支持 justify-content-evenly
旧版 Bootstrap（5.2 及以下）压根不提供 justify-content-evenly 类，用它不会生效。别指望加个 class 就能跑通。
- 查文档确认你用的 Bootstrap 版本：
console.log(bootstrap.Version)或看node_modules/bootstrap/dist/css/bootstrap.min.css文件头注释 - 若版本低于 5.3，硬写
justify-content-evenly会被浏览器忽略（尤其 Safari 15.4 之前） - 回退方案不是“降级用 around”，而是手动控制：给中间项加
mx-auto，两边保留默认margin
用 @supports 做渐进增强比硬编码更可靠
直接删掉 evenly 改用 around，会导致布局在新旧浏览器里视觉不一致——这不是兼容，是妥协出 bug。
推荐写法：
.row {
justify-content: space-around;
}
@supports (justify-content: space-evenly) {
.row {
justify-content: space-evenly;
}
}
这样现代浏览器走 evenly，老浏览器自动 fallback 到 around，且无需 JS 干预。
注意：@supports 检测的是 CSS 属性值支持，不是 Bootstrap 类名是否存在。
动态增删子项时 mx-auto 容易失稳
当按钮数量不固定（比如从后端渲染、或用户可添加/删除），手动给“中间项”加 mx-auto 会失效——你无法预判哪个是中间，JS 补位又容易和框架（如 React/Vue）的渲染时机冲突。
此时唯一稳健方案是：
- 升级到 Bootstrap 5.3+，并用
justify-content-evenly - 或彻底放弃 Flex 分布，改用 CSS Grid：
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))配合gap - 避免在响应式场景下混合使用
mx-auto和justify-content-*
最常被忽略的一点：哪怕你用了 evenly，只要子项总宽度撑满容器（无剩余空间），它就跟 start 一样——Flex 分布只在有“剩余空间”时才起作用。
