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

【问题标题】：Is it possible to have a progress bar move from right to left based on a negative value in Twitter Bootstrap?是否可以根据 Twitter Bootstrap 中的负值让进度条从右向左移动？
【发布时间】：2013-06-04 05:39:12
【问题描述】：

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

对此有任何意见，如果可能的话，还有指向类似项目的指针吗？我还没有真正找到与这个框架相关的任何事情。

我看过这样的帖子：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>

【问题讨论】：

标签： css twitter-bootstrap progress-bar

【解决方案1】：

除了公认的答案，在 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>

【讨论】：

【解决方案2】：

我真的想通了！ :) 结果真的很简单，而且确实在之前链接的帖子中找到了答案；

    <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;”并且“float; right”使条形图从右向左移动。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

progress {
  transform: rotate(180deg);
}

或者更好

progress {
  direction: rtl;
}

【讨论】：

【解决方案5】：

如果我可以提出不同的选择，那就更容易了。这样想：

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" style="width:40%;"></div>
</div>

.progress 元素是块级元素，因此只需浮动或定位 .progress-bar 即可。 Here 是这个想法的快速提琴供参考。

【讨论】：

5 年后的今天，对 SO 的代表更改让我回到了这个……此时我意识到我的“不同选项”实际上与接受的答案相同。我现在感觉自己就像一个真正的明亮火花.. mini facepalm

【解决方案6】：

在进度类上使用transform: rotate(180deg);。

【讨论】：

【解决方案7】：

您可以将边距自动添加（.ml-auto）到进度条

<div class="progress">
  <div class="progress-bar ml-auto" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0"
    aria-valuemax="100"></div>
</div>

【讨论】：

【解决方案8】：

尝试切换背景和前景色并逐渐减小进度条值。它可能有效，但会非常混乱。

【讨论】：

我不确定这是否可行，因为范围可以从 -X% 到 +Y%。这些值将显示在两个不同的栏中，而不是同一个 :) 将它们彼此相邻可视化 :) （如果我理解您的评论正确）
如果范围在 -X% 和 +Y% 之间，那么您的状态栏需要具有从 0 到 X+Y 的范围。每次更新时只需添加 X。

【解决方案9】：

简单interchange the background colors of progress and progress bar。这样，如果进度条宽度发生变化，它看起来就像是在以相反的方式进行。包括 .css 样式

.progress{
  background-color: #007bff;
}

.progress-bar{
  background-color: #e9ecef;
}

【讨论】：