Bootstrap列无内置最小宽度，col-sm-1仅表示sm及以上占1/12宽；直接加min-width会因flex-shrink与flex-basis冲突导致换行或溢出；应优先用无断点col配合min-width，或通过媒体查询定义响应式最小宽类。
Bootstrap 列本身没有内置的“最小宽度”强制机制，col-sm-1 不代表“这列不能窄于某个像素值”，它只表示“在 sm 及以上断点下占 1/12 的父容器宽度”。真要保内容可见，得靠 CSS 弹性行为 + 显式约束，而不是依赖类名语义。
为什么直接加 min-width 会让布局错乱
给 col-sm-1 加 style="min-width: 120px;" 看似合理，但问题在于：Bootstrap 的列是 flex 项目，默认 flex-shrink: 1，而 min-width 会和父级 flex-basis（即 col-sm-1 计算出的 ~8.33%）冲突。一旦所有列的 min-width 总和超过 100%，就会撑破容器，触发换行或溢出。
- 浏览器先按
col-sm-1算出基础宽度（比如 80px），再叠加min-width: 120px，实际取较大值 - 若三列
min-width总和达 300px，而容器只有 280px，最后一列必然被挤到下一行 -
col类（无断点前缀）默认flex: 1 1 0，更易受min-width干扰
用 col + min-width 替代固定列类
把需要“弹性伸缩但不跌破底线”的列，换成无断点前缀的 col，它不绑定具体比例，只参与 flex 分配，配合 min-width 更可控。
<div class="row"> <div class="col-sm-4" style="min-width: 66px;">Name</div> <div class="col-sm-1" style="min-width: 120px;">Instance name</div> <div class="col" style="min-width: 87px;">Due date</div> </div>
-
col的flex-basis是0，宽度完全由剩余空间和min-width共同决定 - 前两列锁死最小宽度后，第三列自动吃掉所有剩余空间，不会因比例计算出错而换行
- 该写法在 Bootstrap 4/5 中均有效，无需 JS
用媒体查询 + 自定义类精准控制断点行为
如果某列必须在特定断点（如 md）起才启用最小宽度，硬写 style 属性会污染 HTML 且无法响应。应抽离为带断点的 CSS 类。
@media (min-width: 768px) {
.col-md-min-460 {
min-width: 460px;
}
}
- 应用时：
<div class="col-12 col-md-5 col-md-min-460"> <li>关键点：这个类必须放在 <code>col-md-5后面，否则会被后者flex-basis覆盖 - 避免对同一列同时设
col-md-5和min-width，除非你确认该断点下 5/12 宽度 ≥ 460px，否则会冲突 - 检查列内是否有
<table>：加 <code>table-layout: fixed+width: 100%强制适应 - 检查是否有长无空格字符串：用
word-break: break-word或overflow-wrap: break-word - 慎用
flex-shrink: 0：它会让列彻底拒绝缩小，比min-width更霸道，且无法回退
容易忽略的 Flex 层级干扰
Bootstrap 行（.row）是 display: flex，但它的子元素（列）还可能被内部内容（如表格、长单词、white-space: nowrap）拖住不收缩——这时 min-width 不是问题根源，而是内容自身抗拒压缩。
真正难处理的不是“怎么设最小宽度”，而是判断该约束该落在哪一层：是列容器？是内部文字？还是表格单元格？漏掉其中一层，min-width 就形同虚设。
