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

Question

I want to make the Bootstrap progress bar value placed outside of the progress bar to the right.

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

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

Answer 1

我会使用 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