Bootstrap 4 html 中不同大小的输入类型文件和按钮

Question

我在 html 中使用 Bootstrap 4，我有一个由输入栏和按钮组成的输入框。

我将按钮的大小设置为“lg”（大），但无法将输入栏设置为相同的大小。

这是我的代码：

<form>
    <div class="input-group">
        <div class="custom-file">
        <input type="file" class="custom-file-input" id="customFileInput" accept=".csv" aria-describedby="customFileInput">
        <label class="custom-file-label" for="customFileInput">Select File</label>
        </div>
        <div class="input-group-append">
        <button class="btn btn-success btn-lg" type="button" id="uploadBtn" onclick="OnClickUpload()">Upload</button>
        </div>
    </div>
</form>

这是结果：

如何将输入栏的大小设置为“lg”（与按钮相同）？

Answer 1

您需要使用 .input-group.input-group-lg，如文档中所示： https://getbootstrap.com/docs/4.6/components/input-group/#sizing

编辑：

这不适用于 .input-group 中的 .custom-file-input。
您需要覆盖 .custom-file-label 上的 BS 样式，如下所示：

.input-group-lg .custom-file-label {
  font-size: 1.4rem;
  margin: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<form>
  <div class="input-group input-group-lg">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="customFileInput" accept=".csv" aria-describedby="customFileInput">
      <label class="custom-file-label" for="customFileInput">Select File</label>
    </div>
    <div class="input-group-append">
      <button class="btn btn-success" type="button" id="uploadBtn" onclick="OnClickUpload()">Upload</button>
    </div>
  </div>
</form>

Answer 2

从按钮的 class 中删除“btn-lg”并仅放置边距。

class="btn btn-success m-2"

Bootstrap 4 html 中不同大小的输入类型文件和按钮

Input type file and button of different size in Bootstrap 4 html

html

input

button

bootstrap-4

编辑：