在引导程序中更改堆叠进度条的总值

Question

我想更改堆叠进度条的最大值。 默认情况下为100％。

HTML

<div class="progress">
   <div class="progress-bar progress-bar-info" role="progressbar" style="width:20%">
    Abc
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:30%">
    dfgdf
  </div>
</div>

在这张图片中，我想给最大值60％，但是要花100％。

Answer 1

没有属性可以设置最大值；它将始终是0到100。您将不得不重新计算样式以缩放它们以固定100点的比例。

如果最大值为60，并且您希望值适合100％的范围，则必须将值超过60的比率作为百分比，而不是直接使用值：

20 / 60 * 100% = 33%
30 / 60 * 100% = 50%

然后您的进度栏将按预期工作：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 33%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="60"></div>
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="60"></div>
</div>