Bootstrap 5开发表单如何避免小屏幕下span元素收缩隐藏文字

问题原因 #

这个问题主要由三点导致：

1. 代码中拼错了input-group类名（误写为imput-group），输入组的原生适配样式没有生效
2. 给「JPEG Only」的<span>设置了col-1类，小屏幕下1/12的视口宽度不足以放下文本，会被自动压缩
3. 没有给span设置禁止收缩属性，空间不足时会被优先挤压变形

解决方法 #

• 修正input-group的拼写错误，调整文件上传行的布局结构，不要混用栅格类和输入组类
• 给「JPEG Only」的span添加Bootstrap 5自带的flex-shrink-0工具类，强制元素不收缩
• 替换固定的col-*类为带断点的响应式栅格类，避免小屏幕下所有元素挤在同一行

修改后的文件上传行参考代码：

<div class="row ms-3 mt-2 mb-2">
  <label for="photo" class="col-md-2 me-5 mb-2 mb-md-0">Upload Photo</label>
  <div class="col-md-7 input-group">
    <span class="input-group-text flex-shrink-0">JPEG Only</span>
    <input type="file" name="photo" id="photo" class="form-control" accept="image/jpeg" />
  </div>
</div>

如果需要更稳定的固定宽度效果，也可以给span增加自定义最小宽度样式：

.input-group-text {
  min-width: 80px;
  text-align: center;
}

内容的提问来源于stack exchange，提问作者thisdanguy