具有进度条的引导程序输入组

Question

我想使用引导程序输入分组将进度条，“浏览”按钮和“上载”按钮分组为一行。我正在使用引导程序4，并且尝试了以下操作。

implementation 'androidx.annotation:annotation:1.1.0'
androidTestImplementation 'androidx.annotation:annotation:1.1.0'

但是样式出现错误，如下所示。

我要跟踪输出。

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

应如下所示。

Answer 1

请覆盖“ custom-file-label”类提供的填充。

请参考：http://jsfiddle.net/maloth_n/kh9jm8do/1作为解决方案

代码：

<div class="form-group row m-2">
    <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>
<style>
.custom-file-label {
    padding: 0 !important;
  }
</style>

Answer 2

添加此CSS规则：

  .form-group .custom-file-label {
        padding: 0;
    }

   button.btn.btn-outline-secondary {
      height: 40px;
      border-left: 0;
      border-color: #ccc;
   }

在HTML中为各个元素添加类并更新CSS规则。

Answer 3

这两行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;
}