Html 引导程序5-如何显示内联文本和进度条

如何使用bootstrap 5在同一行上显示文本和进度条

弹性时间：

{{分}}秒

---

我正在尝试使用d-inline类，但没有按预期工作

p元素与progress div处于同一级别。 要使用bootstrap将两者放在同一行上，可以将col div作为一行与flex对齐，添加以下类：.d-flex、.flex row和.align items center。 标记如下所示：

      <div class="col-12 countdown d-flex flex-row align-items-center">
        <p class="text-muted d-inline pe-3 mb-0">Elasped time:</p>
        <div class="progress">
          <div class="progress-bar" ref="elaspedTime" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
            {{ minutes }} seconds
          </div>
        </div>
      </div>

---

您可以在以下位置查看工作示例：

，因为您使用的是导航栏，请尝试将代码放入列表中。范例

<ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#"><p class="text-muted d-inline pe-3">Elasped time:</p></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <div class="progress-bar" ref="elaspedTime" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
            {{ minutes }} seconds
          </div>
        </a>
      </li>
    </ul>

---

我看过演示，这就是我要找的。我不是前端专家。我注意到我错过了容器，但我认为这不是一个大问题？你需要的东西不需要容器。