justify-content: space-between 在 bootstrap 中有效，但需容器为 flex 布局、子元素≥2个、无 width/flex-basis 干扰且父容器不限制可用空间；少于两个子元素时退化为左对齐。
justify-content: space-between 在 Bootstrap 中能用，但不是所有地方都“看起来有效”——关键看容器是不是 Flex 容器、子元素数量是否 ≥2、有没有宽度干扰。
为什么 .row 上加 justify-content-between 有时没反应
因为 .row 默认是 Flex 容器（Bootstrap 4/5 都如此），但以下情况会让 space-between 失效：
-
.col-*类自带flex: 0 0 auto，如果内容撑宽导致两列实际占满 100%，中间没空隙可分配，space-between就退化为左对齐 - 父容器（比如
.container）设置了max-width或padding，挤压了.row的可用宽度 - 误在
.col-*内部加justify-content-between：它只对直接子元素生效，而.col-*里通常只有文本或块级元素，不构成 Flex 容器 - 只有一列（比如单个
.col-md-6）：space-between要求至少两个子项才能把首尾推到两端
两个等宽列怎么真正两端对齐
两个 .col-md-6 默认填满整行，无法触发 space-between。必须打破 100% 占据状态：
- 改成
.col-md-5+.col-md-5，留出 2 列空白（≈16.67%），justify-content-between才能把它们推到容器两端 - 或用
.col-md-auto+.ms-auto：第一个列自适应内容宽度，第二个列靠ms-auto（margin-left: auto）顶到右侧 - 避免给列设
width、flex-basis或!important，否则会覆盖 Bootstrap 响应式计算逻辑
按钮和文字在同一行两端对齐的写法
这是最常踩坑的场景——别直接套 .row 包一层文字加按钮，层级容易错：
- 用
<div class="d-flex justify-content-between align-items-center"> 包住文字和按钮，确保两者是直接子元素 <li>若文字需要左对齐、按钮右对齐，且中间无其他内容，<code>justify-content-between就够了；不需要text-start/text-end - 别给外层加
text-center：它作用于整个块，会让文字也被居中，破坏左对齐意图 - 注意
align-items-center是为了垂直居中对齐，否则按钮和文字基线可能错位 -
text-justify只作用于段落内连续文本，不能让两个按钮“两端对齐” -
justify-content-between对单个文字无效，它只对 Flex 容器的直接子元素起作用 - 想让“标签左对齐 + 值居中 + 操作按钮右对齐”，必须拆成三个独立元素，用
d-flex justify-content-between+flex-grow-1控制中间项占位
text-justify 和 justify-content-between 别混用
text-justify 是纯文本对齐，靠单词间空格拉伸实现，对中文基本无效；justify-content-between 是 Flex 布局的子元素分布策略，控制的是块级元素的位置关系：
真正容易被忽略的是：Flex 对齐类只影响“直接子元素”，任何嵌套层级都会中断作用链；检查 DevTools 里的 computed display 是否确实是 flex，比猜更可靠。
