Bootstrap - 在右侧放置进度条值

Question

我想让 Bootstrap 进度条值位于右侧的进度条之外。

我不认为这是可能的，但现在我看到的唯一选择是将进度类设置为 100% 的宽度减去值文本的宽度。

处理这个问题的最佳方法是什么？

Answer 1

这将是一个办法。您需要进一步的样式以使其类似于您提供的图像。

.progress-bar span{
    text-indent: 420px;
    position: absolute;
    color: black;
}
.progress {
    width: 400px;
}

<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
       <span class="show">50% Complete</span>
   </div>
</div>