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