col-auto在移动端未填满剩余宽度，因其本意是由内容撑开而非分配剩余空间；正确做法是将col-auto放前、col放后，使col吃掉剩余空间，且需同属一个row、避免与col-*混用。
col-auto 在移动端为什么没填满剩余宽度？
因为 col-auto 本意就是“由内容撑开”，不是“填满剩余空间”——它不参与 12 列计算，也不响应 flex 剩余宽度分配。你真正要的是让一列自适应、另一列固定，但写成 col-auto + col 后发现小屏下右侧没占满，大概率是漏了关键前提。
移动端填满剩余宽度的唯一稳解：col + col-auto 组合（且顺序不能反）
必须把固定宽/内容窄的列放前面，用 col-auto；把要填满的列放后面，用 col（无后缀）。Bootstrap 的 flex 分配逻辑是从左到右依次计算：col-auto 先按内容定宽，col 再吃掉所有剩余空间。
-
col-auto必须和col在同一个row下，单独写无效 - 不要写成
col-6 col-auto—— 这会让col-auto被col-6的 flex-grow 挤缩 - 如果左侧内容太长（比如未折行的 URL），加
text-truncate或min-width: 0防撑破 - 小屏下若需堆叠而非并排，给
row加d-flex d-sm-block控制显示方式
想在 xs 断点下也生效，别用 col-sm-* 类
col-sm-* 只从 576px 起生效，小于该值会回退到默认行为（通常是堆叠或 auto 宽度）。要确保超小屏（
<div class="row"> <div class="col-auto">标签:</div> <div class="col"><input type="text" class="form-control"></div> </div>
这里 col 在所有尺寸下都参与剩余空间分配，col-auto 在 xs 下同样按内容定宽——这才是真·移动端全覆盖。
常见失效原因：flex-shrink 干扰和父容器缺失
即使写对了类名，也可能因以下原因失效：
- 父元素没包
row——col和col-auto依赖row的display: flex和负外边距 - 给
col元素加了width、max-width或flex-basis，覆盖了 Bootstrap 默认的flex: 1 1 0 - 同行混用了
col-4和col——col-4的flex-basis是 ~33.33%，会抢走本该留给col的空间 - 自定义 CSS 里写了
flex-shrink: 0，导致col不收缩也不扩张，卡死在初始宽度
真正起作用的从来不是“类名多酷”，而是 flex 分配链条是否完整、有没有被意外截断。移动端尤其敏感，一点点干扰就全乱。
