如何设置bootstrap进度条最大值300？

Question

我目前正在制作一个最大值为 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>

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

Answer 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>

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

如何设置bootstrap进度条最大值300？

How to set bootstrap progressbar max-value 300?

html

progress-bar

bootstrap-4