twitter-bootstrap - Bootstrap-将进度栏值放在右侧

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

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

最佳答案

我将使用CSS表来实现

的HTML

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

的CSS

.progress-custom {
    display: table;
    width: 100%;
    margin-bottom: 20px; /*optionally same as the margin bottom of progress class*/
}

.progress-custom .progress{
    margin-bottom: 0;
    display: table-cell;
    vertical-align: middle;
}

.progress-custom .progress-value{
    display: table-cell;
    vertical-align: middle;
    width: 1%;
    padding: 0 4px; /*optionally*/
}

你可以看到它here

关于twitter-bootstrap - Bootstrap-将进度栏值放在右侧，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37077199/