twitter-bootstrap 是否可以根据 Twitter Bootstrap 中的负值让进度条从右向左移动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16910523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to have a progress bar move from right to left based on a negative value in Twitter Bootstrap?
提问by Nicklas Pouey-Winger
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.
对此有何意见，如果可能，是否提供指向类似项目的指针？我还没有真正发现与这个框架相关的任何事情。
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?
我看过这样的帖子：Reverse progressbar using CSS3，但我不确定这是否是使用 Bootstrap 时要走的路。关于 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>
回答by Nicklas Pouey-Winger
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>
Adding styles "display: block;" and "float; right" caused the bar to move from right to left.
添加样式“显示：块；” 和“浮动；右”使条从右向左移动。
回答by RedHotPawn.com
Further to the accepted answer, in Bootstrap 4+, the progress bar now uses Flex, and floating won't work.
除了已接受的答案，在 Bootstrap 4+ 中，进度条现在使用 Flex，并且浮动不起作用。
So now, do the following (add "justify-content-end" ):
所以现在，执行以下操作（添加“ 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>
回答by Chris Wolverton
You can adjust an actual progress bar element via CSS in a couple different ways.
您可以通过 CSS 以几种不同的方式调整实际的进度条元素。
progress {
transform: rotate(180deg);
}
or better yet
或者更好
progress {
direction: rtl;
}
回答by jcroll
In Bootstrap 4 just change the div with class .progressto flex-direction: row-reverseor use the flex-row-reversehelper class (as denoted below):
在 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>
回答by jcroll
If I could propose a different option, it's even easier than this. Think about it this way:
如果我可以提出不同的选择，那就比这更容易。这样想：
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" style="width:40%;"></div>
</div>
The .progresselement is a block-level element, so just float or position the .progress-barhowever you like inside it. Hereis a quick fiddle of this idea for reference.
该.progress元素是一个块级元素，因此只需在其中浮动或.progress-bar放置您喜欢的任何内容即可。这是这个想法的快速提琴供参考。
回答by Phong Le
You can add the margin left auto (.ml-auto) to the progress bar
您可以在进度条中添加 margin left auto (.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>
回答by SuKu
Simple just interchange the background colors of progress and progress bar. That way if the progress bar width changes it will look like it is progressing in reverse way. Including the .css style
简单而已interchange the background colors of progress and progress bar。这样，如果进度条宽度发生变化，它看起来就像是在以相反的方式进行。包括 .css 样式
.progress{
background-color: #007bff;
}
.progress-bar{
background-color: #e9ecef;
}
回答by Jason
Use transform: rotate(180deg);on the progress class.
使用transform: rotate(180deg);上的进步类。
回答by David Jashi
Try switching background and foreground colors and gradually reducing progress bar value. It might work but it will be VERY confusing.
尝试切换背景和前景色并逐渐减少进度条值。它可能有效，但会非常混乱。
