如何增加bootstrap 3中进度条的限制

Question

我在bootstrap中遇到Progressbar的宽度问题。 我在最后一个进度条中添加了3个进度条的值。 但它超过了100。 例如progressBar 1 - 25     progressBar 2 - 45     progressBar 3 - 45 25 + 45 + 45 = 115 现在它超越了进度条的限制 所以我可以将最大宽度增加到500或类似的东西。

Answer 1

这真的是个好主意吗？当115％的人完成某事时，难道不会让人迷惑吗？

为什么不缩放进度条的值？由于你有3个，它们每个应占总数的33.3％。

http://jsfiddle.net/VQS2k/109/

HTML

    <div class="progress progress-striped">
      <div class="progress-bar progress-bar-success check_bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
        <span class="sr-only">70% Complete (success)</span>
      </div>
    </div>
    <div class="progress progress-striped">
      <div class="progress-bar progress-bar-info check_bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
        <span class="sr-only">75% Complete</span>
      </div>
    </div>
    <div class="progress progress-striped">
      <div class="progress-bar progress-bar-warning check_bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
        <span class="sr-only">60% Complete (warning)</span>
      </div>
    </div>

    Overall Progress
  <div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger bar-total" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="0" style="">
    <span class="sr-only"></span>
  </div>

JS

var total = 0;
var bars = 0;
$('.check_bar').each(function(i,v) {
    var value = $(this).attr('aria-valuenow');
    total += parseInt(value);
    bars  += parseInt(i);
  });

  $('.bar-total').css('width', total/bars+'%').attr('aria-valuenow', total/bars);