Bootstrap进度条 - 剩余文本

Question

我有一个堆叠的bootstrap进度条：

产生这个的代码是（在Angular.io中，虽然这是一个CSS问题）：

<div class="progress">
<div class="progress-bar progress-bar-success"
     [ngStyle]="{width:4/16 | percent:'1.0-1'}">
    <span>4</span>
</div>
<div class="progress-bar progress-bar-blue"
     [ngStyle]="{width:10/16 | percent:'1.0-1'}">
    <span>10</span>
</div>
<span>2</span>
</div>

我希望“2”（即剩余的数字）显示在剩余空间的中央（进度条右侧的灰色区域）。它目前位于我希望它出现的左侧。有没有办法用CSS实现这个目标？

Answer 1

看我的小提琴here在这里，我假设右边的宽度是不变的，所以添加了width:20%。