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

时间:2019-07-13 17:47:50

标签: twitter-bootstrap

我想更改堆叠进度条的最大值。 默认情况下为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>

enter image description here

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

1 个答案:

答案 0 :(得分:0)

没有属性可以设置最大值;它将始终是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>