Bootstrap 5 如何实现文本与进度条同一行显示（d-inline未生效）

你试过给文本加d-inline却没效果的核心原因是：Bootstrap 5中的.progress组件默认是块级元素，即使前面的文本被改成内联显示，块级的进度条依然会自动另起一行占满整行宽度，靠单个元素加inline类无法实现同行排版。

具体调整可以按以下步骤操作，全程使用Bootstrap内置类，不需要写自定义CSS：

• 给承载文本和进度条的父容器开启flex弹性布局，强制内部元素横向排列
• 调整进度条的弹性占比，自动适配剩余宽度
• 移除元素自带的默认外边距，保证垂直对齐整齐

具体修改点：

1. 给.col-12.countdown元素添加d-flex align-items-center gap-2 px-3类：d-flex将容器设置为弹性布局，内部子元素默认横向同行排列；align-items-center保证文本和进度条垂直方向居中对齐，不会高低错位；gap-2自动在元素间留合适间距，替代原手动添加的pe-3边距
2. 给.progress元素添加flex-grow-1类，让进度条自动占满父容器扣除文本宽度后的所有剩余空间，不会因为块级默认占满整行把文本挤到上方
3. 给文本p标签添加mb-0类，移除p标签默认自带的下外边距，避免对齐偏移；同时移除原p标签上冗余的d-inline类——flex容器内的子元素天然会横向排列，该类没有实际作用
4. 给navbar内部的row容器添加w-100类，补全原有代码中容器宽度不足的问题

修正后的完整可运行代码：

<nav class="navbar bg-light fixed-bottom">
  <div class="row m-0 w-100">
    <div class="col-12 countdown d-flex align-items-center gap-2 px-3">
      <p class="text-muted mb-0">Elapsed time:</p>
      <div class="progress flex-grow-1">
        <div class="progress-bar" ref="elaspedTime" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
          {{ minutes }} seconds
        </div>
      </div>
    </div>
  </div>
</nav>

补充说明：如果不想使用flex布局，也可以给.progress添加d-inline-block类，同时手动给进度条设置适配的宽度值，但这种方式在不同屏幕宽度下需要手动调整尺寸，响应式适配效果远不如flex方案。

内容的提问来源于stack exchange，提问作者newbiedev