如何在Bootstrap进度条下方显示数值？

不需要使用JavaScript图表库，纯靠Bootstrap的布局工具类和简单的结构调整就能实现需求，核心思路是把每个进度条和对应的数值封装成独立的垂直小组，再通过Flex布局让数值自然显示在进度条下方。

修改后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container pt-4">
  <!-- 外层Flex容器，让多个进度条小组横向排列 -->
  <div class="d-flex gap-3">
    <!-- 进度条+数值的垂直小组 -->
    <div class="d-flex flex-column align-items-center flex-grow-1">
      <div class="progress w-100">
        <div class="progress-bar" role="progressbar" style="width: 15%;"></div>
      </div>
      <span class="mt-1">15</span>
    </div>

    <div class="d-flex flex-column align-items-center flex-grow-1">
      <div class="progress w-100">
        <div class="progress-bar bg-success" role="progressbar" style="width: 30%;"></div>
      </div>
      <span class="mt-1">45</span>
    </div>

    <div class="d-flex flex-column align-items-center flex-grow-1">
      <div class="progress w-100">
        <div class="progress-bar bg-info" role="progressbar" style="width: 20%;"></div>
      </div>
      <span class="mt-1">65</span>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

关键调整说明 #

• 结构重组：把每个进度条和数值放在d-flex flex-column align-items-center的容器里，这个类会让内部元素垂直排列并水平居中，刚好实现进度条在上、数值在下的效果。
• 外层Flex布局：外层的d-flex gap-3让三个进度条小组横向分布，gap-3用来添加小组之间的间距。
• 宽度适配：给每个小组加flex-grow-1，让它们自动均分容器宽度；进度条设置w-100填满所在小组的宽度。
• 移除内部文字：删掉原进度条<div class="progress-bar">里的数值，把数值单独放在下方的<span>中，用mt-1添加和进度条的间距。

如果需要自定义数值的样式（比如颜色、字号），直接给<span>添加Bootstrap的文本类或者自定义CSS即可，完全不需要依赖额外的图表库。

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