col-auto是唯一按内容定宽的类，但不响应断点；bootstrap 5不支持col-sm-auto等带断点前缀写法，仅col-auto有效，且必须与col同属一个row才能生效，单独使用无效。
col-auto 是唯一能按内容定宽的类，但它不响应断点
Bootstrap 5 中没有 col-sm-auto 或 col-md-auto 这种写法——所有带断点前缀的 col-*-auto 类都无效。真正可用的只有无前缀的 col-auto，它让列宽完全由内容自然宽度决定，且不参与 12 列栅格计算。
但要注意：col-auto 必须和另一个 col（或 col-*）同属一个 row 才能触发 flex 分配逻辑；单独写 <div class="col-auto">文本</div> 会失效，因为父容器缺 row 的 flex 布局和负边距支持。
- 内容含长 URL、未换行英文串时，视觉上“撑宽”不是
col-auto生效，而是溢出导致，需加text-truncate或min-width: 0 - 混用
col-6和col-auto在同一行时，col-6的flex-grow: 1会挤压col-auto，甚至压成一条线 - 若要按钮组按文字长度自适应排列并折行，得组合
flex-wrap+ 每个col-auto加flex-shrink-0
想让一列“内容定宽”、另一列“吃掉剩余空间”，顺序不能反
很多人把 col-auto 放后面，结果移动端右侧没填满——因为 col-auto 本意就是“由内容撑开”，不是“分配剩余空间”。真需求其实是：左侧窄（如标签、图标），右侧宽（如输入框、文本区）。
正确结构是：col-auto 在前，col（无后缀）在后，且必须同属一个 row：
<div class="row"> <div class="col-auto">用户名:</div> <div class="col"><input type="text" class="form-control"></div> </div>
-
col（无后缀）默认有flex-grow: 1，会主动吃掉所有剩余空间 - 小屏下若需堆叠而非并排，给
row加d-flex d-sm-block：xs 下块级堆叠，sm+ 启用 flex 让col-auto生效 - 避免对同一个元素同时加
col-auto和col-4，class 优先级混乱会导致小屏宽度突变
表格里用 col-* 控制列宽？别信，得靠 table-layout: fixed
直接在 <th> 或 <code><td> 上加 <code>col-3 类对表格列宽毫无作用——那是为网格系统设计的，不适用于 <table> 内部。<p>要固定表格列宽，必须启用 CSS 的 <code>table-layout: fixed，否则浏览器始终按内容自动计算宽度：
| ID | 名称 |
|---|
-
<col>标签是最干净的控制方式，比在每个th上写style="width: 120px"更易维护 - 启用
fixed后，长文本会溢出或撑破列，必须配合word-break: break-all或text-overflow: ellipsis - 若用了 BootstrapTable 的
fixed-columns插件，它会动态重写列宽，手动设的width会被覆盖，得等插件渲染完成后再操作 DOM
嵌套 row 中 col-auto 失效，是因为 flex 环境被破坏
在 <div class="col"><div class="row">...</div></div> 这类嵌套结构里，col-auto 常常不生效。根本原因是：内层 row 虽然启用了 flex，但它的父级 col 默认设置了 min-width: 0 不足，导致子项 flex 分配被约束。
修复方法很具体：
- 给外层
col加min-w-0（Bootstrap 5.3+）或手动加style="min-width: 0" - 确保内层
row下至少有两个列：一个col-auto，一个col（不能只放一个col-auto） - 不要在嵌套
row中混用col-*和col-auto，尤其避免col-6这类带flex-grow的类
最易忽略的是：即使结构全对，如果内容本身是未设 max-width 的图片或长单词，col-auto 的宽度仍会失真——它反映的是内容自然宽度，不是你期望的“紧凑感”。
