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