<p>justify-content-* 类必须作用于 flex 容器才生效；.row 默认是 flex 容器可直接使用，而 .nav 或普通 div 需先加 d-flex；该属性仅影响直接子元素，且 between/around/evenly 仅在多子项且有剩余空间时显差异。</p>
justify-content-* 必须用在 flex 容器上才生效
很多人加了 justify-content-center 却没反应，根本原因是目标元素没开启 flex 布局。bootstrap 的 justify-content-* 类只是设置 justify-content css 属性，它对普通 div 或 ul（非 flex 容器）完全无效。
-
.row默认已是display: flex，所以直接加justify-content-center就能居中它的子列（.col-*） -
.nav默认不是 flex 容器（Bootstrap 4/5 中需显式加d-flex），所以justify-content-center单独写在<ul class="nav">上不会起作用 - 想让一个普通
<div>内的按钮水平居中？得先加d-flex，再加justify-content-center
justify-content-* 的取值差异和典型误用场景
justify-content-start（默认）、center、end 比较直观；但 between、around、evenly 容易混淆——它们只在**多个子项**且**容器有剩余空间**时才体现区别。
-
justify-content-between：首项贴左、末项贴右，中间项等距分布（首尾不留边距） -
justify-content-around：每项两侧留等宽空白，视觉上“包围”每个项目 -
justify-content-evenly：所有项目之间 + 首尾到容器边缘的间距完全相等（最均匀） - 如果容器宽度刚好塞满所有子项（无剩余空间），这三者效果完全一样——都是紧挨着排列
为什么给外层容器加 justify-content-center 没用？
常见错误：把 justify-content-center 加在 .container 或 .container-fluid 上，期望让里面某个 .row 居中。这是无效的，因为 .container 不是 flex 容器（它是 block），且 justify-content 只影响**直接子元素**。
- ✅ 正确做法：在你要居中的那一行上加，比如
<div class="row justify-content-center"> - ❌ 错误写法：
<div class="container justify-content-center"><div class="row">...</div></div>（justify-content-center被忽略） - 如果要居中整页内容（比如登录框），应该用
d-flex justify-content-center align-items-center min-vh-100包裹内容区，而不是动.container
响应式 justify-content 类怎么写？
Bootstrap 支持按断点前缀生成响应式版本，比如 justify-content-md-center 表示「仅在 medium 及以上屏幕居中」，小屏下恢复默认（start）。
- 可用前缀：xs / sm / md / lg / xl / xxl（对应不同最小视口宽度）
- 注意：没有
justify-content-xs-*，最小断点直接用无前缀类（即默认行为） - 组合使用没问题，比如
justify-content-center justify-content-lg-between：小屏居中，大屏两端对齐 - 别漏掉父容器高度控制——响应式居中若用于垂直方向，记得配
min-vh-100或明确高度，否则align-items-center会失效
实际布局中，最容易被忽略的是「flex 容器前提」和「作用对象层级」——加错一层，就全白搭。
