css - 引导进度标签未完全显示

Question

我有一个带有自定义标签的进度条：

<div id="progress" class="progress mb-1" style="height: 20px;">
    <div class="progress-bar" role="progressbar" style="width: 5.0%" aria-valuenow="5.0" aria-valuemin="0" aria-valuemax="100">1/20</div>
</div>

它就像一个魅力。但是，对于小屏幕，标签不会完全显示在左侧：

我试图通过几种方式解决这个问题（将条形的宽度硬编码为 2 比 1，玩弄颜色），但我想知道这是否是一个更优雅的解决方案？

标签： csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Answer 1

您可以添加包含标签的第二个 div，如下所示：

<div id="progress" class="progress mb-1">
    <div class="progress-label">1/20</div>
    <div class="progress-bar" role="progressbar" style="width: 5.0%" aria-valuenow="5.0" aria-valuemin="0" aria-valuemax="100">1/20</div>
</div>

有一些风格：

.progress {
  position: relative;
}
.progress-bar {
  overflow: hidden;
  z-index: 2;
}
.progress-label {
  color: #0275D8;
  position: absolute;
  left: 0;
  height: 100%;
  top: 0;
  z-index: 1;
}

预习 ：