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