bootstrap的col类本身不带min-width，其“最小宽度”实为flex-basis、容器宽度与flex-shrink:1共同作用的结果；真正可控的防压缩方案是组合使用flex-shrink-0与flex-basis:auto（如col-auto flex-shrink-0），而非依赖min-width。
Bootstrap弹性列没有内置最小宽度限制
直接说结论：col 类本身不带 min-width，你看到的“最小宽度”其实是 flex-basis + 容器宽度 + flex-shrink: 1 共同作用的结果。所谓“取消最小宽度限制”，本质是解除对列宽的隐性约束，而不是删掉某个默认值。
为什么加了 min-width 反而让布局更糟
常见错误是手动加 style="min-width: 120px" 后发现最后一列换行、整行撑出容器、小屏下文字严重折行。这是因为：
-
min-width是硬性下限，但没关掉flex-shrink，列仍会压缩到该值才停止，此时若总宽超限，flex-wrap就会触发换行 - 多个列都设了
min-width，加起来超过 100%，row被迫横向溢出，手机上出现滚动条 -
col-sm-1在 576px 屏幕下flex-basis≈ 48px，你设min-width: 120px实际是强行拉宽，破坏比例逻辑
真正可控的“取消”方式：用 flex-shrink: 0 + flex-basis: auto
想让某列不被压缩、又不靠 min-width 卡死，应该组合控制它的弹性行为：
- 去掉所有手写的
min-width（除非你明确需要内容保底尺寸） - 给目标列加
flex-shrink-0—— 这会把flex-shrink设为 0，彻底禁用收缩 - 配合
col-auto或显式style="flex-basis: auto"，让宽度回归内容自然尺寸 - 其他列保持
col或col-*，由它们承担收缩责任
示例：
<div class="row"> <div class="col-auto flex-shrink-0">Status</div> <div class="col">Long description text here...</div> </div>
容易被忽略的关键点
别指望媒体查询断点（比如 sm 对应 min-width: 576px）能“保护”列宽——它只决定类是否启用，不管列内部怎么缩。查真实渲染效果，必须打开 Chrome DevTools → Elements → 选中列 → 看 Computed 面板里的 width 和激活的 @media 规则。任何“我以为它该多宽”的判断，都不如直接看计算值来得准。
