Bootstrap 5 - 如何显示行内文本和进度条

Question

如何在 bootstrap 5 的同一行显示文本和进度条？

  <nav class="navbar bg-light fixed-bottom">
    <div class="row m-0">
      <div class="col-12 countdown">
        <p class="text-muted d-inline pe-3">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>
    </div>
  </nav>

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

Answer 1

p 元素与进度 div 处于同一级别。要使用 bootstrap 使两者在同一行上，您可以使 col div 与 flex 对齐作为一行添加这些类：.d-flex、.flex-row 和 .align -项目中心。标记将是这样的：

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

您可以在以下网址查看工作示例：see example

Answer 2

由于您使用的是导航栏，请尝试将您的代码放在列表中。示例

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

Bootstrap 5 - 如何显示行内文本和进度条

Bootstrap 5 - How to display inline text and progress bar

html

css

twitter-bootstrap

bootstrap-5