如何改变Bootstrap进度条的最大值？

Question

基本上我的进度条有7个"步" - 默认的最大值是100,因此100/7不会分成整数.

因此,我想将进度条的最大值更改为例如7.

   <div id="wizard-progressbar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
      <span class="sr-only">0% Complete</span>
   </div>

我已经尝试更改aria-valuemax并尝试设置data-max,但它们都没有改变任何东西.如何更改Bootstrap进度条的最大值？

Answer 1

aria-valuenow,aria-valuemin并且aria-valuemax是元数据.进度条样式不依赖于它们的值.

然后你应该使用:

• aria-valuemin="0"
• aria-valuemax="7"

活动值是这个:style="width: 0%;".您需要手动将其设置为:

• 0%
• 14.3%
• 28.6%
• 42.9%
• 57.2%
• 71.5%
• 85.8%
• 100%

Bootply

如果要自动设置此宽度,可以使用JS来完成:

$('.progress-bar').each(function() {
  var min = $(this).attr('aria-valuemin');
  var max = $(this).attr('aria-valuemax');
  var now = $(this).attr('aria-valuenow');
  var siz = (now-min)*100/(max-min);
  $(this).css('width', siz+'%');
});

Bootply