如何设置引导进度条最大值 300？答案

【问题标题】：How to set bootstrap progressbar max-value 300?如何设置引导进度条最大值 300？
【发布时间】：2019-09-21 20:37:40
【问题描述】：

我目前正在制作一个最大值为 300 的进度条，但我不知道如何设置最大值 300。目前它适用于最大值 100，但我希望它是 300。

我试过了：

<div class="mt-3 progress"><div class="progress-striped active" role="progressbar" value="80" aria-valuemin="0" aria-valuemax="300" style="width:80px"></div>

有人可以帮我解决这个问题吗？

【问题讨论】：

标签： html bootstrap-4 progress-bar

【解决方案1】：

无法使用 Bootstrap4 的进度条分配最大值；这实际上只是一个应用了样式的 div。所以我们可以指定 (80/300) 即 26.6 作为 bootstrap-4 进度条的宽度；

这可以通过如下所示的 HTML 进度条实现；

progress {
  color: lightblue;
}

progress {
  border: none;
  width: 100%;
  background: crimson;
}

progress::-webkit-progress-value {
  background: lightblue;
}

progress::-moz-progress-bar {
  background: lightcolor;
}

progress::-webkit-progress-value {
  background: orange;
}

progress::-webkit-progress-bar {
  background: lightgray;
}

.progress .progress-bar {
  background: orange;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <h2>Bootstrap4 - Progress Bar</h2>
  <div class="progress">
    <div class="progress-bar" value='80' style="width:26.6%">80 out of 300</div>
  </div>

  <hr/>

  <h2>Default HTML progress bar</h2>
  <progress value="80" max="300"> </progress>
</div>

更新：更新两个进度条的背景颜色

【讨论】：

谢谢你，我已经尝试过 HTML 进度条，它现在可以工作了。以及如何更改值颜色？
@Nomi，请立即检查...如果您将答案标记为已选，将不胜感激，谢谢。
谢谢伙计。我需要更多帮助。你知道 laravel 编程吗？
不知道 Laravel...我是一个 JS、angular、react、node 人，为几个网站做了完整的品牌推广