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

将每个进度条放在行中，如下所示：

<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类，否则它将不会垂直居中。

Answer 2

您可能必须为.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/