加了 flex-wrap: wrap 还不换行，是因为 Bootstrap 5 的 .col 默认 flex-basis: 0 + flex-grow: 1，强制占满整行，无剩余空间触发换行；需改用 .col-auto + flex-shrink-0 + .row.flex-wrap 才能按内容宽度自动折行。
为什么加了 flex-wrap: wrap 还不换行？
因为 Bootstrap 5 的 .col 默认是 flex-basis: 0 + flex-grow: 1，它会强行占满整行宽度，哪怕内容只有几个字。此时父容器就算有 flex-wrap: wrap，子列也没“空间余量”可让——换行条件根本没触发。
真正起作用的是控制列的弹性基础尺寸和收缩行为：
-
flex-basis决定列“想占多宽”，设为auto（即用.col-auto）才能由内容宽度主导 -
flex-shrink: 0（对应flex-shrink-0）防止列被压缩到内容溢出或截断 -
flex-wrap: wrap必须加在.row上，但它只是“允许换行”，不是“强制换行”
怎么让列按内容宽度自动折行？
最简可靠方案：用 .col-auto + flex-shrink-0 + .row.flex-wrap，别混用 .col-md-4 这类固定比例类——它们会覆盖 flex-basis: auto，让折行失效。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="row d-flex flex-wrap"> <div class="col-auto d-flex flex-shrink-0">短文本</div> <div class="col-auto d-flex flex-shrink-0">稍长一点的内容</div> <div class="col-auto d-flex flex-shrink-0">非常非常长的内容项</div> </div>
注意：.col-auto 是关键，d-flex 和 flex-shrink-0 建议一起加，避免内联元素基线对齐干扰高度判断。
为什么加个 border 就换行？
根本不是“报错”，而是盒模型计算溢出：Bootstrap 默认用 box-sizing: content-box 时，padding 和 border 会额外加到列宽上。比如两个 .col-md-6 各占 50%，加了 border: 1px 后实际变成 50% + 2px，总宽超 100%，浏览器只能换行。
修复方式优先级如下：
- 全局重置（加在 CSS 入口最顶部）：
* { box-sizing: border-box; } - 临时调试用
outline（不占布局空间），例如outline: 1px dashed #007bff - 真要加
border，套一层内层<div>，把边框写在内部容器上
响应式下只在特定断点启用换行？
Bootstrap 没提供 flex-wrap-md 这类工具类，得手动处理。常见做法是用内联样式配合媒体查询，或者自定义 CSS 类：
内联方式（简单直接）：
<div class="row" style="flex-wrap: nowrap;"> <div class="col-auto flex-shrink-0">项</div> <div class="col-auto flex-shrink-0">项</div> </div>
然后在 CSS 中覆盖：
@media (min-width: 768px) {
.row[style*="flex-wrap"] {
flex-wrap: wrap !important;
}
}更稳妥的做法是写一个自定义类如 flex-wrap-md，并在 SCSS 中用 @include media-breakpoint-up(md) 控制生效范围。
容易忽略的一点：换行是否发生，最终取决于子项的 min-width、white-space 和父容器是否被意外撑宽（比如漏了 .container）。别只盯着 flex-wrap，先检查 computed styles 里的实际 width 和 flex-basis 值。
