Bootstrap进度条内文本仅显示下半段问题求助

你的问题出在绝对定位的.progress-type元素缺少垂直居中样式，加上自定义的.progress高度为25px，文本默认的位置和行高导致只显示下半部分。

修复方案 #

给.progress-type添加垂直居中样式，通过top: 50%配合transform: translateY(-50%)实现精准垂直居中，也可以直接设置line-height等于进度条高度。

修改后的CSS代码 #

.progress {
  position: relative;
  height: 25px;
  margin-bottom: 4px;
}

.progress-type {
  position: absolute;
  left: 0px;
  font-weight: 400;
  padding: 3px 30px 2px 10px;
  color: #fafafa;
  background-color: rgba(25, 25, 25, 0.2);
  /* 新增垂直居中样式 */
  top: 50%;
  transform: translateY(-50%);
  /* 也可以用以下方式替代：
  line-height: 25px;
  */
}

完整可运行代码示例 #

<div class="row">
  <div class="col">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%;">
        <span class="sr-only">90% Complete</span>
      </div>
      <span class="progress-type">HTML / HTML5</span>
    </div>
  </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>

额外说明：IDE差异不会影响页面渲染结果，若仍有问题可确认讲师使用的Bootstrap版本是否与你一致，此修复方案适配Bootstrap 5.x全版本。

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