如何在Bootstrap 3中增加进度栏的限制

debugcn 发表于 Dev

用户1038

我在引导程序中遇到进度栏的宽度问题。我在最后一个进度栏中添加了3个进度栏的值。但是它超过了100。例如progressBar 1-25 progressBar 2-45 progressBar 3-45 25 + 45 + 45 = 115现在，它超出了progressbar的限制，所以我可以将最大宽度增加到500或类似的值。

爱德华

那真的是个好主意吗？当他们完成某件事的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);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。