如何改变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