Bootstrap 4文件输入标签溢出列问题：如何让标签适配列宽？

这个问题在Bootstrap 4的文件输入组件里挺常见的，主要是因为默认的.custom-file-label样式有white-space: nowrap和文本截断的设置，加上列布局的约束，容易出现溢出或对齐偏差。下面给你两种可行的解决方案：

一、Bootstrap原生类快速调整 #

你可以通过添加几个Bootstrap内置的工具类来修复，不需要写额外CSS：

修改你的代码，给.custom-file-label加上text-wrap类（让文本自动换行），同时给.form-group.row加上align-items-center来保证整行元素垂直对齐：

<div class="form-group row align-items-center"> <!-- 添加align-items-center保证垂直居中 -->
  <label for="image-upload" class="col-sm-3 col-form-label">Resim Yükle (5:3 Oranlı)</label>
  <div class="custom-file col-sm-9">
    <input type="file" class="custom-file-input" id="image-upload" required>
    <label class="custom-file-label text-wrap" for="image-upload">Choose file...</label> <!-- 加上text-wrap允许换行 -->
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</div>

text-wrap会把标签的white-space设为normal，让文本在列宽范围内自动换行，避免溢出；align-items-center则让左侧标签和右侧文件输入组件垂直居中对齐，视觉上更整齐。

二、自定义CSS精细化控制 #

如果原生类的效果不够理想，你可以写一段自定义CSS来完全控制标签的样式：

/* 调整自定义文件标签的换行与空间分配 */
.custom-file-label {
  white-space: normal; /* 允许文本换行 */
  overflow: visible; /* 取消溢出隐藏，完整显示内容 */
  padding-right: 2.5rem; /* 给右侧的"Browse"按钮预留足够空间 */
}

/* 强制文件组件占满父列宽度 */
.custom-file {
  width: 100%;
}

把这段CSS加到你的样式文件里，就能让标签自适应列宽，同时避免和右侧按钮重叠。如果需要进一步优化垂直对齐，依然可以配合align-items-center类使用。

要是你担心文件名过长导致的排版问题，还可以保留省略号效果同时允许换行：

.custom-file-label {
  white-space: pre-wrap; /* 保留空格并自动换行 */
  text-overflow: ellipsis;
  overflow: hidden;
}

这样既保证文本在列内换行，又会在单行内容过长时显示省略号，兼顾美观和可读性。

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