html - 如何在栏的左侧和栏外显示进度条的百分比？ Bootstrap 进度条

Question

我需要像这样在左侧显示 Bootstrap 进度条的百分比:

现在我有这个:

我的 HTML:

            <span>76%</span>
            <div class="progress bar-wrapper">
                <div class="progress-bar skill-bar" role="progressbar" style="width: 76%"
                     aria-valuenow="76"
                     aria-valuemin="0" aria-valuemax="100">Photoshop
                </div>
            </div>

有什么方法可以让我在栏外的左侧插入？使用 Bootstrap 4

Answer 1

因为您使用的是 Bootstrap V4，所以只需创建一个 flex 容器:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="d-flex align-items-center p-2">
  <span class="p-1">76%</span>
  <div class="progress bar-wrapper w-100 ">
    <div class="progress-bar skill-bar" role="progressbar" style="width: 76%" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100">Photoshop
    </div>
  </div>
</div>