justify-content-around 在 .row 中无反应是因为其仅作用于单行 Flex 项目，而 .row 默认 flex-wrap: wrap 导致换行后每行独立分配空间；需确保单行布局或改用 d-flex 显式控制。
justify-content-around 在 bootstrap 容器内起作用的前提是：容器必须是 flex 容器（即有 d-flex），且主轴方向明确（flex-row 或 flex-column）；它不会在普通 .container 或 .row 上直接生效，除非你显式启用 flex 行为。
为什么 justify-content-around 在 .row 里没反应？
因为 .row 默认只是个 Flex 容器（Bootstrap 5 确实用 display: flex），但它默认设置了 flex-wrap: wrap，而 justify-content 类只影响**单行内**项目的主轴分布。一旦子项换行（比如列数超 12 或宽度不够），justify-content-around 就只对**当前行内的项目**生效，视觉上容易误判为“没起作用”。
- 常见错误现象：
<div class="row justify-content-around"><div class="col-4">A</div><div class="col-4">B</div></div>—— 实际上 A 和 B 会居中显示，但左右留白不等，因为col-4是响应式栅格，内部有 padding，且justify-content-around是按“项目边界”分配空间，不是按内容中心对齐 - 真正生效的场景：用
d-flex flex-row或d-flex flex-column显式定义容器，子元素是纯div、button等非栅格项 - 参数差异：
justify-content-around给每个项目**两侧分配相等空白**，所以首尾项目外侧空白只有中间间隔的一半；而justify-content-evenly才是所有间隙（含首尾外侧）完全均等
justify-content-around 在垂直方向（flex-column）怎么用？
当主轴是 Y 轴（即 flex-column），justify-content-around 控制的是**上下方向的间距分配**，适合做垂直居中+留白的导航栏、卡片列表等。
- 必须组合使用：
d-flex flex-column是基础，缺一不可；仅flex-column不生效（缺少display: flex） - 注意高度限制：若父容器无固定高度（如
min-height: 300px），子项可能挤在顶部——Flex 对齐依赖可用空间，空容器没有“上下”可言 - 示例：
<div class="d-flex flex-column justify-content-around" style="height: 400px;"> <button class="btn btn-primary">Top</button> <button class="btn btn-secondary">Middle</button> <button class="btn btn-outline-dark">Bottom</button> </div>
和 align-items 混用时容易踩的坑
justify-content-around 管主轴，align-items 管交叉轴。在 flex-column 下，主轴是 Y，交叉轴是 X，所以 align-items-center 才能让按钮水平居中；如果漏掉，按钮会左对齐。
- 典型错误：
justify-content-around单独用在flex-column容器里，结果按钮堆在左侧——其实是没加align-items-center - 性能影响：无额外开销，纯 CSS 布局，但嵌套过深（如 flex 容器里再套 flex 容器）可能增加渲染复杂度
- 兼容性：Bootstrap 5+ 全支持，IE 不支持；如需兼容旧版，得回退到
margin: auto+position: absolute等手工方案
真正难的不是写对类名，而是判断当前容器是否已是 Flex 上下文、主轴方向是否符合预期、以及有没有被子元素的 margin/padding/width 干扰了空间计算——这些细节不看渲染盒模型，光靠类名堆砌很容易白忙活。
