Bootstrap 4 выравнивание индикатора выполнения

Question

Я пытаюсь создать индикатор рейтинга, используя индикатор загрузки bootstrap 4.Вот что я пытаюсь достичь.Однако индикатор загрузки загружается с помощью flex, поэтому я не могу выровнять текст слева и справа.

JSFiddle

HTML

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <div class="review__rating__stats">

            <span class="review__rating__progress">
                <span class="review__rating__level">5 Star</span>
                <span class="progress">
                    <span class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></span>
                </span>
                <span class="review__rating__count">68</span>
            </span>

        </div>
    </div>
    </div>

Answer 1

Возможно, вам придется установить ширину для .review__rating__count. «3» вызывало смещение, потому что это одна цифра, в то время как другие цифры - это две цифры, которые занимают больше места.

Теперь вы даже можете установить .review__rating__stats как flexbox, а затем использовать flex:, чтобы установить ширину по умолчанию для .review__rating__count.

Компоновка

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6">
            <div class="review__rating__stats">
                <div class="review__rating__progress">
                    <strong class="review__rating__level">5 Star</strong>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width: 68%" 
                          aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <strong class="review__rating__count">68</strong>
                </div>
                <div class="review__rating__progress" />
                ...
            </div>
        </div>
    </div>
</div>

Стили

.review__rating__progress {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.review__rating__progress .review__rating__level,
.review__rating__progress .review__rating__count {
    /* 10% is the default width for the level and count labels */
    flex: 1 1 10%;
}

.review__rating__progress .review__rating__level {
    text-align: right;
}

.review__rating__progress .progress {
    margin: 0.25rem 1rem;
    flex-grow: 8;
}

Результат

демо: https://jsfiddle.net/davidliang2008/j4y70wfz/36/

Answer 2

Поместите каждый индикатор в строку следующим образом:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <div class="container review__rating__stats">
      <div class="row review__rating__progress">
        <span class="col-sm-2 review__rating__level">5 Star</span>
        <div class="col-sm-9 align-self-center">
          <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
        <span class="col-sm-1 review__rating__count">68</span>
      </div>
    </div>
  </div>
</div>

Обратите внимание, что у div, содержащего индикатор выполнения, должен быть класс align-self-center, иначе он не будет центрирован по вертикали.