必须加d-flex，否则justify-content-between完全不生效；它仅在显式声明的Flex容器中起作用，且要求子元素不少于2个、无width/flex-shrink:0等抢占空间的样式。
父容器必须加 d-flex，否则 justify-content-between 完全不生效
很多人写了 justify-content-between 却发现两个元素都挤在左边——根本原因不是类名写错，而是父容器没加 d-flex。Bootstrap 的所有 flex 对齐类（包括 justify-content-*、align-items-*）只在显式声明为 Flex 容器时才起作用。justify-content-between 本身不带 display: flex，它只是个“对齐指令”，没容器就无从对齐。
常见错误：
- 只给
.row加justify-content-between，但没加d-flex（尤其在 Bootstrap 4 或自定义样式覆盖后） - 把类加在
.container上，而它默认是块级元素，不是 Flex 容器 - 嵌套过深，目标元素不是 Flex 容器的**直接子级**，比如
div.d-flex > div > button，对齐类加在最外层，中间那层div拦截了布局流
justify-content-between 要求至少两个子元素，且不能有干扰宽度的样式
只有两个元素时，justify-content-between 才能让它们分别贴住左右边缘；如果只有一个，它会默认左对齐（因为“之间”不存在）。另外，子元素自身不能抢占全部空间：
- 别给子元素设
width: 100%或flex-shrink: 0，否则它们会撑满整行，没剩余空间可“分配” - 避免子元素内有
position: absolute或margin-bottom: auto，这些会让父容器无法正确计算高度和可用空间 - 如果用了
flex-wrap: wrap（比如响应式换行），justify-content-between只作用于当前行，最后一行只剩一个元素时就会左对齐
左右边缘相等 ≠ 视觉居中，注意容器本身的 padding
即使 justify-content-between 正常工作，你看到的“左右距离不等”，大概率是因为父容器（比如 .container）自带左右 padding，或者你手动加了 px-* 类。Flex 对齐对的是 content box 边界，不是视口边缘。
-
.container默认不设左右padding，但很多项目会在body或外层 wrapper 加了px-3之类，导致整体偏移 - 若真要内容贴浏览器左右边缘，得确保最外层容器无左右
padding，且没被mx-auto或其他 margin 类干扰 - 小屏下突然不对称？检查是否用了响应式类如
px-md-4，它在xs断点下不生效，造成左右留白不一致
替代方案：ms-auto 推右 + 左侧自然靠左，更可控
当只要一左一右两个元素（比如导航栏里的 logo 和操作按钮），ms-auto 比 justify-content-between 更稳：
- 左侧元素什么都不用加，保持默认流式布局
- 右侧元素加
ms-auto（margin-inline-start: auto），在 LTR 页面中就是margin-left: auto，天然顶到最右 - 它不依赖子元素数量，也不怕换行或 flex-wrap 干扰，响应式下依然可靠
- 示例：
<div class="d-flex"><br> <div class="navbar-brand">Logo</div><br> <div class="ms-auto"><button class="btn btn-sm">登录</button></div><br></div>
display 和 padding。 
