bootstrap 5的col类无内置最小宽度限制，其宽度由flex-basis、容器宽度和媒体查询共同决定；防压缩需组合设置min-width与flex-shrink:0，而非依赖断点值。
Bootstrap 5 的 col 类没有内置最小宽度限制
Bootstrap 5 的列（如 col-6、col-sm-4）本质是 Flex 项目，其宽度由 flex-basis + 容器 width + 媒体查询共同决定，**不是靠固定 min-width 强制锁定**。如果你看到某列“卡死不缩”，大概率是你或第三方 CSS 显式写了 min-width，或者父容器设置了 min-width 导致整行撑开。
常见错误现象：
- 加了
style="min-width: 120px"后，row总宽超 100%，最后一列换行 - 用
col-sm-1却发现小屏下宽度远大于预期（因为flex-basis按 1/12 计算，但未限制收缩下限） - 误以为
sm断点（min-width: 576px）会“保护”列不被压缩——其实它只控制类是否生效，不干预列内弹性行为
想让某列“不被压太窄”，优先用 min-width + flex-shrink: 0
单纯设 min-width 不够：Flex 默认允许收缩（flex-shrink: 1），当空间不足时仍会压缩内容，直到触达 min-width，此时若总宽超限，就会触发换行。
正确做法是组合控制：
- 给目标列加
min-width: 120px（按内容实际需要设，别硬套 768） - 同时加
flex-shrink: 0（阻止它被压缩） - 把其他列设为
col或col-auto，让它们承担收缩责任
例如保持“Instance name”可见：
<div class="row"> <div class="col-sm-4" style="min-width: 66px;">Name</div> <div class="col-sm-1" style="min-width: 120px; flex-shrink: 0;">Instance name</div> <div class="col">Due date</div> </div>
别依赖 col-sm-* 的“断点起始值”来防压缩
sm 在 Bootstrap 5 是 min-width: 576px，但它只决定 col-sm-* 类是否启用，**不保证该列在 ≥576px 视口下一定有最小物理宽度**。比如 col-sm-1 在 576px 宽视口里，1/12 ≈ 48px，远小于你期望的 120px。
真正影响列宽的是：
- 当前视口宽度（决定媒体查询是否命中）
- 所用列类的
flex-basis（col-1是 8.333333%，col是 0%） - 是否设置了
min-width/max-width/flex-shrink - 父
row是否有min-width或overflow干扰
查真实渲染宽度？打开 Chrome DevTools → Elements → 选中列 → Styles 面板看 computed width 和激活的 @media 规则。
Bootstrap 4 和 5 的 sm 断点值不同，混用会出错
老项目迁移时最容易踩坑：Bootstrap 4 的 sm 是 min-width: 768px，而 Bootstrap 5 改为 576px。如果你升级了框架但没改自定义媒体查询，或用了混合版本的 CSS 文件，就可能出现：
- 本该在手机竖屏（col-* 被覆盖
- 平板横屏（≈800px）本应进
sm却因旧规则误入md - 调试时看到
body::before显示 “sm”，但实际样式来自另一套断点
确认方法：查你项目里引入的 Bootstrap CSS 文件头注释，或运行 getComputedStyle(document.body).getPropertyValue('--bs-breakpoint-sm')（Bootstrap 5+ 支持 CSS 变量）。
复杂点在于：最小宽度从来不是 Bootstrap 单方面定的，而是你写的 min-width、框架的 flex-basis、浏览器的 Flex 算法、以及设备 DPR 共同作用的结果。盯着一个参数调，不如打开 DevTools 看实时 computed 值。
