Bootstrap 4 自定义文件上传和大小调整

Question

我如何使用类，如添加自定义的文件输入上浆引导4 input-group-sm，form-control-sm等等..？我想将此自定义文件输入字段设置为小。有没有人有办法解决吗？

使用类 form-control-sm

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="form-group">
      <input class="form-control form-control-sm" value="Small input field">
    </div>

使用类 input-group-sm

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">Go</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" value="Small input group">
</div>

两者都不在这里工作。如何使输入字段变小？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group input-group-sm">
  <div class="custom-file">
    <input type="file" class="custom-file-input form-control-sm">
    <label class="custom-file-label">Choose file</label>
  </div>
</div>

Answer 1

使用以下方法将填充减少到 0p-0

还添加以下样式

#abc.custom-file-label,
#abc.custom-file-label::after {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
}

#abc.custom-file-label,
#abc.custom-file-label::after {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
}

#abc.custom-file-label,
#abc.custom-file-label::after {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
}