时间戳

首页 > 解决方案 > 如何在同一行上获得多个具有不同 ID 的进度条？

javascript - 如何在同一行上获得多个具有不同 ID 的进度条？

问题描述

我有一个 Bootstrap 进度条，显示用户的熟练程度（基本上，对尝试的正确响应）。但是，我想用两个条来着色差异，一个标记为“bg-success”，另一个标记为“bg-warning”，以使对比更加明显。我用不同 ID 的进度条做到了这一点。问题是进度条不会出现在同一行。

下面的代码显示了我的位置，并且我尝试了所有可以修复的重新标记尝试，但无济于事。

以下是相关的 JavaScript：

function setBars() {
  var profPerc = Number(((myProg[1] / myProg[2]) * 100).toFixed(csvSize.toString().length));
  document.getElementById("profBar").innerHTML = "<strong>" + profPerc.toString() + "</strong>";
  document.getElementById("profBar").style.width = profPerc + "%";
  document.getElementById("offBar").innerHTML = "<strong>&nbsp;</strong>";
  document.getElementById("offBar").style.width = (100 - profPerc) + "%";
}

// There are no errors with any of the other above-mentioned variables.

这是相关的HTML：

<div class="proficiencydiv">
  <div class="progress-bar bg-success" role="progressbar" id="profBar" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-warning" role="progressbar" id="offBar" aria-valuemin="0" aria-valuemax="100"></div>
</div>

我希望得到如下所示的结果：

"[profBar][offBar]".

相反，我得到：

"[profBar]"

"[offBar]"

标签： javascripthtmlcssbootstrap-4

解决方案

在css下面添加

.proficiencydiv{
    display: flex}


.proficiencydiv{
display: flex}

.proficiencydiv div{
margin: 10px}
<div class="proficiencydiv">
  <div class="progress-bar bg-success" role="progressbar" id="profBar" aria-valuemin="0" aria-valuemax="100">profBar</div>
  <div class="progress-bar bg-warning" role="progressbar" id="offBar" aria-valuemin="0" aria-valuemax="100">offBar</div>
</div>

推荐阅读