bootstrap列被内容撑宽是因为.col默认flex-grow:1且flex-basis:0，强制占满行宽；需用col-auto+flex-shrink-0锁定内容自然宽度，避免与.col混用，并注意flex-basis、flex-grow、flex-shrink协同作用。
Bootstrap列为什么总被内容撑宽
因为默认的 .col 是 flex 项，自带 flex-grow: 1 和 flex-basis: 0，它不看内容多宽，只管“把剩余空间占满”。哪怕你只放一个字母，它也会抢走整行宽度——这不是 bug，是设计如此。
用 col-auto + flex-shrink-0 锁定内容自然宽
想让列严格按文字/图片本身宽度显示，不能只加 col-auto。它只是把 flex-basis 改成 auto，但默认仍可收缩（flex-shrink: 1），一遇到同行有 col 或容器窄，就会被压扁。
-
col-auto必须和row一起用，单独写在body或container下无效 - 同行不能混用
col和col-auto，否则col的flex-grow: 1会把col-auto挤没影 - 必须加
flex-shrink-0，否则长内容插入后、或窗口缩小时，列宽仍可能塌缩 - 对图片、按钮等替换元素，额外加
object-fit: cover和显式height，防交叉轴拉伸
固定像素宽又不想响应式？直接上 flex: none
如果内容宽度非常确定（比如图标按钮、固定尺寸头像），比 col-auto 更稳的是彻底禁用 flex 行为：flex: none 等价于 flex: 0 0 auto，既不放大也不收缩，完全按自身尺寸渲染。
-
flex: none比单独flex-shrink: 0更可靠，后者只停收缩，但可能被flex-grow拉宽 - IE11 不支持
flex: none，得回退到-ms-flex: 0 0 auto - 别写
flex: 0 0 0，flex-basis: 0会让图片/文字塌成一条线
表格里列被撑开？table-layout: fixed 是关键
Bootstrap 的 .table 默认是自动布局（table-layout: auto），列宽由内容决定，根本不受 width 控制。要锁列宽，必须切到固定模式。
- 先给
.table加table-layout: fixed，再设width: 100%或具体值，否则 fixed 没基准 - 列宽只能通过
<col>标签、th/td的style="width: 120px"或 CSS 类中width生效 - 长文本溢出？必须配
word-break: break-all或overflow: hidden+text-overflow: ellipsis - 注意：父容器（如
.col-md-8）也得有明确宽度，否则 fixed 模式下表格可能缩成最小内容宽
真正难的不是加哪个 class，而是搞清 flex 布局里 flex-basis、flex-grow、flex-shrink 三者怎么打架——尤其当内容动态插入、或跨断点变化时，col-auto 可能突然失效，flex: none 却始终守得住边界。
