css - 是否可以根据 Twitter Bootstrap 中的负值让进度条从右向左移动？

Question

在开始这个元素之前，我想知道是否有可能反转 Bootstrap 框架中的进度条，以便它可以显示从右到左的值？这个问题背后的原因是我有一个可以从正到负的数字范围。想法是将两个进度条并排放置，当值为正时，右边的进度条显示百分比范围，当值为负时，左边的进度条显示百分比范围。目前，这些值是静态的，但这些值将来会“生效”。

关于此的任何输入，如果可能，指向类似元素的指针？我还没有真正找到与这个框架相关的任何事情。

我看过这样的帖子:Reverse progressbar using CSS3 ，但我不确定这是否是使用 Bootstrap 时要走的路。关于 css，是否有某种覆盖可用于此类功能？

现在，我的进度条设置如下:

        <li>Speed<span class="pull-right"><em>@Math.Round(DepthValue, 2) m/min</em></span>
            <div class="progress progress-success">
                <div class="bar" style="width: @Model.SpeedRangePercentage%"></div>
            </div>
        </li>

Answer 1

除了已接受的答案之外，在 Bootstrap 4+ 中，进度条现在使用 Flex， float 将不起作用。

现在，执行以下操作(添加“justify-content-end”):

<div class="progress justify-content-end">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>