如何在Bootstrap 4中设置文件浏览器尺寸？自定义大/小样式（如custom-file-lg）

算力阿峰

2026-5-15

在Bootstrap 4中调整自定义文件浏览器的尺寸

嘿，我来帮你搞定这个问题～首先得说，Bootstrap 4原生并没有提供custom-file-lg或者custom-file-sm这类现成的尺寸类，不过我们可以自己写几行CSS轻松实现这个效果，下面一步步来：

先回顾下官方给出的基础自定义文件组件结构：

Choose file

第一步：自定义尺寸样式

我们需要针对大、小两种尺寸分别编写CSS类，调整组件内各元素的内边距和字体大小，保证整体样式协调：

/* 大尺寸自定义文件组件 */
.custom-file-lg .custom-file-input {
  padding: .75rem 1rem;
}
.custom-file-lg .custom-file-label {
  padding: .75rem 1rem;
  font-size: 1.25rem;
}
.custom-file-lg .custom-file-label::after {
  padding: .75rem 1rem;
  font-size: 1.25rem;
}

/* 小尺寸自定义文件组件 */
.custom-file-sm .custom-file-input {
  padding: .25rem .5rem;
}
.custom-file-sm .custom-file-label {
  padding: .25rem .5rem;
  font-size: .875rem;
}
.custom-file-sm .custom-file-label::after {
  padding: .25rem .5rem;
  font-size: .875rem;
}

第二步：使用自定义尺寸

把我们写好的类加到基础组件的外层容器上就行：

大尺寸文件浏览器示例：

<div class="custom-file custom-file-lg">
  <input type="file" class="custom-file-input" id="customFileLg">
  <label class="custom-file-label" for="customFileLg">Choose large file</label>
</div>

小尺寸文件浏览器示例：

<div class="custom-file custom-file-sm">
  <input type="file" class="custom-file-input" id="customFileSm">
  <label class="custom-file-label" for="customFileSm">Choose small file</label>
</div>