входная группа начальной загрузки с индикатором выполнения

Question

Я хочу сгруппировать индикатор выполнения, кнопку «Обзор» и кнопку «Загрузить» в одну строку с помощью начальной загрузки. Я использую загрузчик 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:

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

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

Добавьте классы в HTML для соответствующих элементов и обновите правила CSS.

Answer 2

Эти две строки 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;
}

Answer 3

Пожалуйста, переопределите заполнение, заданное классом "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>