Css 基于Twitter引导中的负值，有可能让进度条从右向左移动吗？

在开始这个项目之前，我想知道是否有可能反转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>

Speed@Math.Round（深度值，2）m/min

尝试切换背景色和前景色，并逐渐减小进度条值。它可能会起作用，但会让人非常困惑。

我真的弄明白了！：）事实证明，这真的很容易，答案确实在先前链接的帖子中找到了

    <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>

Speed@Math.Round（深度值，2）m/min

---

添加样式“display:block；”和“float；right”会导致条从右向左移动。

如果我能提出一个不同的选项，那就更容易了。这样想：

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

---

.progress

元素是一个块级元素，因此只需将

.progress条

按您喜欢的方式浮动或定位在其中即可。这是一个快速的想法供参考。

简单的

交换进度和进度条的背景色。这样，如果进度条宽度发生变化，它看起来就像是在以相反的方式进行。包括.css样式

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

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

使用
变换：旋转（180度）代码。
更进一步，在Bootstrap 4+中，进度条现在使用Flex，浮动将不起作用

现在，请执行以下操作（添加“证明内容结束””）：

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

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

progress {
  transform: rotate(180deg);
}

或者更好

progress {
  direction: rtl;
}

您可以将左边距自动（.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>


我不确定这是否有效，因为范围可以从-X%到+Y%。这些值将显示在两个不同的栏中，而不是相同的栏：）将它们显示在彼此相邻的位置：）（如果我正确理解您的评论）如果范围介于-X%和+Y%之间，则您的状态栏需要在0到X+Y之间。每次更新时只需添加X。5年后的今天，一个代表的改变让我回到了这个。。。在这一点上，我意识到我的“不同选择”实际上与公认的答案相同。我现在感觉自己像一个真正的火花。。迷你掌纹
progress {
  direction: rtl;
}

<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>