Bootstrap 未内置 flex-shrink 工具类，需手动用 style="flex-shrink: 0" 或自定义 SCSS 类；其收缩行为依赖 flex-basis、min-width 及父容器 Flex 上下文。
Bootstrap 本身不提供独立的 flex-shrink 工具类，所有相关控制都依赖原生 CSS 的 flex-shrink 属性值，且仅在启用 Flex 布局（display: flex）的前提下生效。
Bootstrap 中怎么设置 flex-shrink？
Bootstrap 5 没有像 flex-grow-0 那样内置 flex-shrink-0 或 flex-shrink-1 类。你必须手动写 CSS 或直接在元素上用 style 设置：
-
flex-shrink是一个原生 CSS 属性，不是 Bootstrap 的“功能模块”，所以不能靠class="flex-shrink-2"这类方式开箱即用 - 若需禁用收缩（常见于固定宽度侧栏），最简方案是：
style="flex-shrink: 0" - 若想复用，可自定义 SCSS 变量并扩展工具类，例如在
_custom.scss中添加：.flex-shrink-0 { flex-shrink: 0 !important; }<br>.flex-shrink-1 { flex-shrink: 1 !important; }<br>.flex-shrink-2 { flex-shrink: 2 !important; } - 注意：Bootstrap 默认所有
.col、.d-flex元素已设display: flex，但不会覆盖子项的flex-shrink—— 它默认仍是1
flex-shrink: 0 和 flex-shrink: 1 的实际差异
关键不在“是否收缩”，而在于“收缩权是否被剥夺”。当父容器空间不足时：
-
flex-shrink: 0：该元素完全拒绝压缩，哪怕溢出容器，也不会变窄；常用于图标、徽章、固定宽按钮 -
flex-shrink: 1（默认）：参与整体收缩计算，按权重分摊溢出空间；比如三个子项都是flex-shrink: 1，溢出 90px，则各缩 30px -
flex-shrink: 2：收缩权重翻倍，同样条件下会比flex-shrink: 1多缩一倍 —— 但注意：它不是“缩成一半”，而是按加权比例分配，具体见下一条
为什么 flex-shrink 计算结果经常不符合直觉？
浏览器不是简单按数值等比缩放，而是先算「基础尺寸 × flex-shrink」加权和，再按占比扣减。例如：
- 三个子项宽度均为
200px，父容器450px→ 总溢出150px - 若它们
flex-shrink分别为1、2、3，则加权和 =200×1 + 200×2 + 200×3 = 1200 - 第一项收缩量 =
(200×1 / 1200) × 150 ≈ 25px，而非(1 / (1+2+3)) × 150 = 25px（巧合相等，但逻辑不同） - 真正容易踩坑的是：
flex-basis或width值越大，相同flex-shrink下收缩越多 —— 很多人只改flex-shrink却忽略基础尺寸影响
Bootstrap Flex 布局的硬伤在哪？
它把 Flex 推广成了默认布局范式，但也放大了原生 Flex 的几个现实约束：
- IE11 及更早版本完全不支持
flex-shrink（即使加-ms-前缀也无效），Bootstrap 5 已放弃 IE 支持，但若项目仍需兼容，就得回退到float或grid（后者 IE 也弱） -
flex-shrink在min-width存在时可能失效：即使设了flex-shrink: 1，只要内容撑开导致宽度 ≥min-width，它就停在那里不再缩 - 响应式断点中切换
flex-direction（如从 row 切 column）时，flex-shrink仍作用于主轴 —— 若没重置，可能在垂直方向意外压缩高度（尤其当flex-basis设为auto时）
真正难调试的，从来不是“怎么写”，而是“为什么写了没反应”——多数时候卡在 flex-basis 隐式值、min-width 干预、或父容器未触发 Flex 上下文这三个点。
