Question

如何使文件浏览器变大（或小）
期待像 custom-file-lg

这样的东西

以下是Bootstrap 4 docs的原始片段

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

Answer 1

Bootstrap 4不提供lg文件输入。实际可视化的是custom-file-label，而不是输入。您可以将form-control-lg d-inline-block添加到标签，然后添加一个小的自定义CSS以获得正确的高度：

.custom-file-label,
.custom-file-label::after {
    height: initial;
}

https://www.codeply.com/go/OYHJuyFLvS

Answer 2

这是不可能的，因为上传窗口不是浏览器元素。

关于Windows，我确信它与其他操作系统相同：

https://docs.microsoft.com/en-us/dotnet/framework/wpf/app-development/dialog-boxes-overview

由于这些对话框是由操作系统实现的，因此可以在操作系统上运行的所有应用程序之间共享它们

公共打开文件对话框实现为OpenFileDialog类，位于Microsoft.Win32命名空间

Answer 3

我添加了一个自定义类（custom-file-lg）和一些CSS，以在Bootstrap 4中启用它。

HTML：

  <div class="form-group row">
    <div class="col-12">
      <label for="user_name" class="small mb-1 text-70">Logo (PNG or JPEG)</label>
      <div class="custom-file custom-file-lg">
        <input type="file" class="custom-file-input" id="logo">
        <label class="custom-file-label" for="logo">Choose file</label>
      </div>
    </div>
  </div>

SCSS：

.custom-file-lg {
  .custom-file-label,
  .custom-file-label::after {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
  }
  .custom-file-label,
  .custom-file-input {
    height: calc(1.5em + 1rem + 2px);
  }
  .custom-file-label::after {
    height: calc(1.5em + 1rem);
  }
}

如何在bootstrap 4中设置文件浏览器大小

3 个答案: