col-auto + col 是唯一稳解：左侧由内容撑开或设固定宽，右侧自动填满剩余空间；必须同属一个row，不可单独使用，且需注意IE11兼容性及sticky侧边栏的高度约束与嵌套row规范。
Bootstrap 中没有 col-sm-auto 这类断点类名
直接写 col-sm-auto 或 col-md-auto 是无效的——Bootstrap 5 的栅格系统不支持带断点前缀的 col-auto。它只提供无断点的 col-auto，且该类本身不响应式切换。
想实现“小屏下内容自适应、大屏下固定比例”，得靠组合控制：
- 用
col-auto作为基础行为（内容撑宽） - 配合
d-block d-sm-flex控制显示方式：小屏堆叠（d-block），中屏及以上启用 flex 布局让col-auto生效 - 若需在某个断点强制恢复百分比列宽（如 md 下改用
col-md-3），必须手动覆盖：先用col-auto，再加col-md-3类，后者会在 md+ 覆盖前者
内容自适应 + 响应式堆叠的常见错误
很多人试图用 col-auto d-sm-col-12 这类写法，但 d-sm-col-12 并不存在——Bootstrap 没有这种 utility 组合类。
正确做法是分层控制：
- 小屏（
xs）下：用d-block w-100强制单列占满，忽略col-auto - 中屏起（
sm及以上）：用d-sm-flex启用 flex 容器，此时col-auto才真正按内容定宽 - 避免在同一个元素上混用
col-auto和col-*，否则小屏可能因 class 优先级混乱导致宽度突变
col-auto 在嵌套 row 中失效怎么办
col-auto 必须和另一个 col（或 col-*）同属一个 row 才能触发 flex 分配逻辑。单独写 <div class="col-auto">xxx</div> 不会生效，浏览器会把它当普通块级元素处理。
典型结构应为：
<div class="row"> <div class="col-auto">标签</div> <div class="col">右侧自适应区域</div> </div>
如果用了 row-cols-* 或 g-* 等辅助类，也要确保父容器是标准 row，否则 col-auto 的 flex-basis 计算会被干扰。
IE11 兼容性问题与降级方案
col-auto 依赖 flexbox 的 flex-shrink: 0 行为，在 IE11 中表现不稳定：有时内容撑不开、有时宽度计算偏差较大。
兼容 IE11 的替代方案只有两个：
- 降级使用 Bootstrap 4 的栅格（其
col-auto在 IE11 下更可控） - 放弃
col-auto，改用显式width+min-width配合d-flex，例如：<div class="d-flex"><div style="width: fit-content; min-width: 80px;">xxx</div><div class="flex-grow-1">yyy</div></div>
注意：fit-content 在 IE11 也不被支持，所以第二个方案实际要用 white-space: nowrap + display: inline-block 模拟内容宽度，再配合 flex-shrink: 0 锚定。
