是否有可能有一个进度条从右到左根据负值在Twitter Bootstrap中移动？ [英] Is it possible to have a progress bar move from right to left based on a negative value in Twitter Bootstrap?

问题描述

在开始这个项目之前，我想知道是否可以颠倒引导框架中的进度条，所以它可以显示一个从右到左的值？这个问题背后的原因是，我有一个范围的数字，可以从积极到消极。想法是将两个进度条相互放置，并且右侧的一个显示百分比范围，当值为正时，左侧的条显示百分比范围。现在，这些值是静态的，但是这些值在未来将是活的。

Before even embarking on this project, I'd like to know if it's at all possible to reverse the progress bar found in the bootstrap framework, so it can display a value going from right to left? The reason behind this question is that I have a range of numbers that can go from positive to negative. The idea is to place two progress bars next to each other and have the right one display the percentage range when the value is positive, and the left bar to display the percentage range when value is negative. For now, the values are static, but these will be 'live' in the future.

任何输入，如果可能，指向类似项目的指针？我没有真正发现与这个框架有关的任何事情。

Any input on this, and if possible, a pointer to similar projects? I haven't really found anything relevant done with this framework.

我看过这样的帖子：使用CSS3反向进度条，但我不知道如果这是使用Bootstrap的方式去。

I've looked at posts like this one: Reverse progressbar using CSS3, but I'm not sure if this is the way to go when using Bootstrap. Is there some sort of override available for this kind of functionality, in regards to css?

现在，我的进度栏是这样设置的：

Right now, my progress bar is setup like so:

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

推荐答案

:)原来是很容易，确实的答案发现在以前的链接的帖子;

I actually figured it out! :) Turned out to be really easy, and indeed the answer was found in the previously linked post;

    <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导致栏从右向左移动。

Adding styles "display: block;" and "float; right" caused the bar to move from right to left.

这篇关于是否有可能有一个进度条从右到左根据负值在Twitter Bootstrap中移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！