我来帮你搞定这个问题！要把百分比放在Bootstrap 4进度条的左侧外部，其实有两种简单又靠谱的方法，看你需求选就行：

方法一：Flexbox布局（推荐，结构清晰） #

这种方法用Bootstrap自带的Flex工具类，不需要额外写CSS，直接调整HTML结构就能实现：

<!-- 外层用Flex容器，让百分比和进度条横向排列并垂直居中 -->
<div class="d-flex align-items-center mb-3">
  <!-- 百分比文本，加右边距和进度条隔开 -->
  <span class="mr-2">75%</span>
  <!-- 进度条用flex-grow-1占据剩余宽度 -->
  <div class="progress flex-grow-1">
    <div class="progress-bar" role="progressbar" style="width: 75%" 
         aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

原理说明： #

• d-flex：把外层容器变成Flex布局，让子元素横向排列
• align-items-center：让百分比和进度条垂直居中对齐
• mr-2：给百分比文本添加右侧间距，避免和进度条紧贴
• flex-grow-1：让进度条自动填充剩余的空间，适配不同宽度的容器

方法二：相对+绝对定位（适合不想改原有布局的场景） #

如果你的进度条已经有固定的父容器结构，不想调整，可以用定位的方式把百分比放在左侧：

<!-- 父容器设置相对定位，作为百分比的定位参照 -->
<div class="position-relative mb-3" style="padding-left: 45px;">
  <!-- 百分比文本绝对定位到左侧，垂直居中 -->
  <span class="position-absolute left-0 top-50 translate-middle-y">60%</span>
  <!-- 原生Bootstrap进度条 -->
  <div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 60%" 
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

原理说明： #

• position-relative：给父容器设置相对定位，让内部的绝对定位元素以它为参照
• padding-left：给左侧的百分比文本预留空间，避免和进度条重叠
• position-absolute left-0：把百分比文本固定在容器左侧
• top-50 translate-middle-y：通过Bootstrap的工具类让百分比文本垂直居中，不需要自己算margin

动态百分比适配 #

如果你的百分比是动态生成的（比如从后端获取或者JS计算），只需要同步修改：

1. 百分比<span>里的文本内容
2. 进度条.progress-bar的width样式值
   完全兼容Bootstrap进度条的原生逻辑，不用额外处理。

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