Bootstrap 4 进度条对齐答案

【问题标题】：Bootstrap 4 Progress bar alignmentBootstrap 4 进度条对齐
【发布时间】：2019-06-26 19:01:31
【问题描述】：

我正在尝试使用 bootstrap 4 进度条创建评分指示器。以下是我想要实现的目标。但是使用 flex 引导进度条，因此我无法左右对齐文本。

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>

【问题讨论】：

你不能做五行，每行三列吗？

标签： html css bootstrap-4

【解决方案1】：

您可能需要为.review__rating__count 设置宽度。 “3”导致错位，因为它是个位数，而其他计数是两位数，占用更多空间。

现在您甚至可以将.review__rating__stats 设置为弹性框，然后使用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/

【讨论】：

【解决方案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 类，否则不会垂直居中。

【讨论】：