Bootstrap 5 的 .container 默认是 display: block，非 Flex 容器，故 justify-content-* 类无效；需外层加 d-flex 或直接设 .container 为 d-flex 才能生效。
Bootstrap 5 的 .container 默认不支持 justify-content 类——它不是 Flex 容器，不能直接用 justify-content-start 等类控制子元素水平对齐。
为什么给 .container 加 justify-content-center 没反应
因为 .container 是普通块级元素（display: block），不是 Flex 容器。所有 justify-content-* 类只对已启用 Flex 的父容器生效（即必须有 d-flex 或 d-inline-flex）。直接加在 .container 上属于“挂错地方”，浏览器完全忽略。
- 检查 computed styles：选中
.container，看display是否为flex—— 几乎总是block -
.container的居中逻辑靠的是margin: 0 auto，和 Flex 对齐无关 - 若你看到某些示例“生效”，大概率是外层额外套了
d-flex父容器，而非.container自身起作用
想让 .container 内部子元素两端对齐，该怎么做
必须显式将 .container 或其**直接父容器**转为 Flex 容器，再应用 justify-content 类。常见可靠路径：
- 在
.container外包裹一层<div class="d-flex justify-content-between">，再把内容放进去 <li>直接给 <code>.container加d-flex（但注意：.container本身有左右 padding，可能影响对齐视觉） - 若内容是
.row，它默认就是display: flex，可直接在.row上加justify-content-between - 避免在
.container上同时加d-flex和text-center—— 后者对块级 Flex 子项无效，纯属干扰 - 只有 ≥2 个子
.col时，justify-content-between才能真正拉开首尾；单个.col会被左对齐（无“之间”可分） -
.col若设了flex-grow-1或w-100，会抢占空间，导致justify-content-between失效 - 响应式断点类如
justify-content-md-between在小屏下自动退化为默认（flex-start），需确认是否符合预期 - 不要指望
justify-content-between让文字或按钮“贴右”，它只管子元素位置；贴右请用ms-auto或text-end - 父容器设
text-center，左侧元素加float-start，右侧加float-end，再加clearfix—— 兼容性好，但脱离文档流需小心 - 用
ms-auto推开最后一个子项：<div class="d-flex"> <div>Left</div> <div class="ms-auto">Right</div> </div> - 纯 CSS：
.container > *:first-child { margin-right: auto; }—— 简单直接，但破坏了 Bootstrap 的 utility-first 哲学
justify-content-between 在 .row 中的典型误用
.row 是 Bootstrap 5 默认的 Flex 容器，所以 justify-content-between 能直接用，但要注意子项数量与间距逻辑：
替代方案：不用 Flex，也能实现两端对齐
如果只是简单排两个元素（如 logo + nav），且不想动 Flex，可用更轻量的方式：
真正容易被忽略的是：.container 的 padding-left / padding-right 会吃掉部分可用宽度，当用 justify-content-between 对齐子元素时，首尾元素离容器边缘的距离 ≠ 你预期的“贴边”。需要微调时，要么改用 .container-fluid，要么用 mx-n* 类抵消内边距。
