Bootstrap 5 中 .col 默认 flex-shrink: 1 且不响应断点，故小屏下仍压缩；禁用需用媒体查询+!important自定义类，如@media (max-width: 767.98px){.my-col-no-shrink{flex-shrink:0!important}}。
Bootstrap 5 中 flex-shrink 在小屏下仍生效的原因
不是类名写错了，而是 Bootstrap 的 .col 默认启用 flex-shrink: 1 —— 它不区分屏幕尺寸，只要父容器是 flex 布局（比如 .row 加了 d-flex），子项在空间不足时就会压缩。哪怕你只用 col-6，在窄屏下两个并列的 col-6 仍可能被压窄、文字换行、图标变形。
关键点在于：flex-shrink 是弹性项目自身的属性，和媒体查询无关；它不靠断点类触发，而是由父容器的 display: flex + 子项默认 flex: 0 1 auto 共同决定。
如何让特定断点下禁用 flex-shrink
Bootstrap 5 没有内置类似 flex-shrink-md-0 的响应式工具类，必须手动覆盖。不能只加 flex-shrink-0，否则所有尺寸都禁用；也不能只改 CSS 类选择器，因为断点类（如 col-md-6）本身不控制 flex-shrink。
正确做法是用媒体查询包裹自定义规则，作用于目标元素：
@media (max-width: 767.98px) {
.my-col-no-shrink {
flex-shrink: 0 !important;
}
}
使用时给需要保护的列加该类：<div class="col-md-6 my-col-no-shrink">...
- 必须用
!important，否则会被 Bootstrap 的.col默认flex声明覆盖 - 媒体查询断点值要和 Bootstrap 的断点对齐（
md是768px，所以用max-width: 767.98px精确控制“仅在 md 以下”） - 不要试图在
.col-md-6上直接写@media覆盖——它没定义flex-shrink，你是在补缺失逻辑
为什么 flex-none 不适用于断点控制
flex-none 是 Bootstrap 提供的快捷类，等价于 flex: 0 0 auto，它同时禁用 grow 和 shrink，且不可响应式拆分。你不能写 flex-none-md 或 flex-none d-md-flex 来实现“仅在中屏禁用收缩”——这类组合无效，因为 flex-none 会直接覆盖父容器的 flex 设置，且无断点变体。
若你真需要“仅在某断点禁用收缩”，唯一可靠路径就是手写带媒体查询的 CSS 规则，绑定到具体业务类名上。
容易被忽略的父子关系陷阱
加了 flex-shrink-0 却没效果？大概率是父容器根本没进 Flex 布局：
-
.row默认不是 flex 容器（Bootstrap 5 中仅靠负 margin 实现 gutter），必须显式加d-flex -
.col自身已设flex: 0 1 auto，若你在.col上再加flex-shrink-0，它会生效；但若加在.col的子元素上，而子元素父级不是 flex 容器，则完全无效 - 用浏览器开发者工具检查 computed styles，确认目标元素的
flex-shrink值是否真的为0，以及其父级display是否为flex
真正起效的链路很窄：父容器 display: flex → 子元素是 flex item → 子元素显式声明 flex-shrink: 0（或通过类/媒体查询注入）。漏掉任意一环，收缩行为就照常发生。
