css - 带进度条的引导输入组

Question

我想使用 Bootstrap 输入分组将进度条、“浏览”按钮和“上传”按钮分组在一行中。我使用的是 bootstrap 4，我尝试了以下操作。

<div class="form-group row">
        <div class="input-group mb-3">
          <div class="custom-file">
            <input type="file" class="custom-file-input" id="inputGroupFile02">
            <div class="custom-file-label">
              <div class="progress" style="height:40px">
                <div class="progress-bar" role="progressbar" aria-valuenow="25" style="width: 25%"  aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
          </div>
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button">Upload</button>
          </div>
        </div>
      </div>

但是样式错误如下。

我想要以下输出。

1. 进度条应与按钮高度相同。
2. 进度条应在“浏览”按钮处结束且不应重叠。
3. 进度条应与“浏览”按钮对齐。

它应该如下所示。

Answer 1

这两行css可以解决你的问题

 .custom-file-label {
    padding: 0;
  }
  .btn{
    height:40px;
  }
  .progress{
    box-sizing: border-box;
    width: 75%;
    height: 40px;
  }
  .custom-file-label::after {
    width: 25%;
    height: 40px;
}