<p>加了 justify-content-between 却没左右对齐，是因为父容器未添加 d-flex 类——该类必须显式声明 display: flex，否则所有 justify-content-* 类均无效；常见失效原因包括父容器非 Flex、子元素非直接子级、混用 text-align 或外层有干扰样式。</p>
为什么加了 justify-content-between 却没左右对齐
因为父容器没加 d-flex——所有 flex 对齐类（justify-content-*、align-items-*）都只在显式声明的 flex 容器上生效。浏览器不会自动把普通 div 当成 flex 容器，光写 justify-content-between 等于白搭。
常见失效场景：
- 给
.row加justify-content-between，但子元素是.col-*，而这些列自带flex: 0 0 auto，内容撑满后没剩余空间可分配 - 外层用了
.text-center或text-end，和 Flex 类混用，语义冲突 - 目标元素不是 Flex 容器的**直接子元素**，比如嵌套了两层
div，对齐类加在了祖父容器上
两个元素一左一右的标准写法
最稳的方式是用 ms-auto 推右边那个，而不是依赖 justify-content-between，尤其适合按钮、图标、操作项等原子组件。
结构示例：
<div class="d-flex"> <button class="btn btn-sm">取消</button> <button class="btn btn-sm btn-primary ms-auto">确认</button> </div>
要点说明：
-
ms-auto是 margin-inline-start: auto，在 LTR 页面中就是margin-left: auto，天然把元素“顶”到最右 - 别给左边按钮加
me-auto，它会把右边按钮挤出视口 - 别给两个按钮都加
flex-grow-1，那样它们会等宽，不是一左一右 - 响应式下依然可靠：小屏宽度收缩时，
ms-auto仍能保证右侧按钮贴边，不会换行错位
三个元素实现「左-中-右」视觉效果
justify-content-between 在三个元素时，首尾贴边、中间留两个等宽间隙，但人眼会因按钮宽度不一觉得中间偏右。真要视觉均衡，优先考虑 justify-content-evenly（Bootstrap 5.3+ 支持）。
结构对比：
-
justify-content-between：首项紧贴左，末项紧贴右，仅分配项间间隙 → 三按钮时中间常显右偏 -
justify-content-evenly：首项前、项间、末项后间隙全部等宽 → 视觉真正等距 - 若项目数只有 2 个，
between和evenly效果一致；超过 2 个必须明确选型
注意：justify-content-evenly 在 Bootstrap 5.2 及更早版本不可用，需确认 CDN 版本 ≥ 5.3。
在 .navbar 或 .modal-body 里左右对齐要绕开哪些坑
导航栏和模态框有默认布局逻辑，硬套 Flex 类容易冲突。
- 导航栏右对齐，必须给
.navbar-nav加ms-auto，不是加在li或a上；Bootstrap 5 用ms-auto，4 用ml-auto，混用就失效 - 模态框主体（
.modal-body）想让内部按钮右对齐，别给整个.modal-body加text-end——表单控件不响应文本对齐；应包一层d-flex justify-content-end - 折叠菜单（
.navbar-collapse）里的链接默认左对齐，靠的是.navbar-nav的justify-content: flex-start，改它需覆盖 CSS，不建议用text-center干扰
真正麻烦的从来不是“怎么写”，而是“该不该用 Flex”——比如表单字段+值+操作按钮，用栅格（.col-auto + .ms-auto）比纯 Flex 更稳，语义清晰、响应安全，也少踩 flex-shrink 和 width 冲突的坑。
