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

Question

在开始这个项目之前,我想知道是否可以反转bootstrap框架中的进度条,所以它可以显示从右到左的值？这个问题背后的原因是我有一系列可以从正面到负面的数字.我们的想法是将两个进度条彼此相邻放置,右边一个显示百分比范围,当值为正时,左边栏显示百分比范围,当值为负时.目前,这些值是静态的,但这些将在未来"生存".

关于此的任何输入,如果可能的话,指向类似项目的指针？我还没有真正找到与此框架相关的任何内容.

我看过像这样的帖子:使用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

我其实想通了!:)原来很简单,确实答案是在之前链接的帖子中找到的;

    <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%; display: block; float: right;"></div>
        </div>
    </li>

添加样式"display:block;" 并且"浮动;右"使条形从右向左移动.

Answer 2

除了接受的答案之外，在 Bootstrap 4+ 中，进度条现在使用 Flex，并且浮动不起作用。

所以现在，执行以下操作（添加“ 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>

Answer 3

您可以通过 CSS 以几种不同的方式调整实际的进度条元素。

progress {
  transform: rotate(180deg);
}

或者更好

progress {
  direction: rtl;
}

Answer 4

在 Bootstrap 4 中，只需将带有 class 的 div 更改.progress为flex-direction: row-reverse或使用flex-row-reversehelper 类（如下所示）：

<div class="progress flex-row-reverse">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>