justify-content: space-between 在 .row 上生效，但需满足容器为 flex 布局、子元素不少于两个、无 width/flex-basis 干扰、父容器不限制可用空间；少于两个子元素时退化为左对齐。
justify-content: space-between 在 .row 上是否生效
直接在 .row 上加 justify-content: space-between 是有效的，但前提是该 .row 没有被父容器限制宽度、且子元素（即 .col-*）未设置固定宽度或 flex-basis 干扰换行逻辑。
常见失效原因包括：
-
.col-*类自带flex: 0 0 auto，若内容撑开导致实际宽度超出预期，space-between就会退化为左对齐 - 父容器设置了
max-width或padding，挤压了.row的可用空间 - 误在
.col-*内部使用justify-content，它只对直接子元素起作用，而.col-*里通常只有文本或块级元素，不构成 flex 容器
如何让两个 .col-md-6 元素两端对齐
两个等宽列默认填满整行，无法触发 space-between —— 因为中间没有“空隙”可分配。必须打破 100% 占据状态：
- 把两个列改为
.col-md-5，留出 2 列空白（即 2/12 ≈ 16.67%），justify-content: space-between才能将它们推到两端 - 或改用
.col-md-auto+ms-auto：第一个列自适应内容宽度，第二个列用ms-auto（Bootstrap 4 的margin-left: auto）顶到右侧 - 避免给列设
width或flex-basis，否则会覆盖 Bootstrap 的响应式计算逻辑
按钮和文字在同一行两端对齐的典型写法
这是最常踩坑的场景：想让左侧文字 + 右侧按钮“视觉上两端对齐”，但直接套 .row 容易错配层级。
推荐结构是：
<div class="d-flex justify-content-between align-items-center"> <span>标题文字</span> <button class="btn btn-primary">操作</button> </div>
关键点：
- 不用
.row和.col，改用d-flex直接创建 flex 容器 -
align-items-center防止文字和按钮基线错位（尤其是带图标的按钮） - 若按钮需固定宽度或最小尺寸，加
flex-shrink: 0防止小屏下被压缩
IE11 下 justify-content 不兼容怎么办
Bootstrap 4 官方已放弃 IE9–10 支持，但 IE11 仍部分支持 flex；不过 justify-content: space-between 在某些嵌套场景下表现异常（比如父容器有 min-height 时）。
兼容性兜底建议：
- 用
text-align: justify+ 伪元素实现近似效果（仅适用于纯文本+单行） - 对关键按钮区域单独加 IE 条件注释，用
float: left/float: right+clear: both回退 - 避免在 IE11 环境中依赖
space-between布局核心功能，优先保障内容可读性和操作可达性
真正容易被忽略的是：flex 容器内元素的 HTML 源码顺序，和键盘 Tab 导航顺序必须一致。哪怕视觉上用了 order 或 margin-left: auto 把按钮推到右边，Tab 键仍按 DOM 顺序聚焦——这点在无障碍测试中经常被漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
