在开始这个项目之前,我想知道是否可以反转bootstrap框架中的进度条,所以它可以显示从右到左的值?这个问题背后的原因是我有一系列可以从正面到负面的数字.我们的想法是将两个进度条彼此相邻放置,右边一个显示百分比范围,当值为正时,左边栏显示百分比范围,当值为负时.目前,这些值是静态的,但这些值将来会“生存”.
关于此的任何输入,如果可能的话,指向类似项目的指针?我还没有真正找到与此框架相关的任何内容.
我看过像这样的帖子: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>
解决方法
我其实想通了! :)原来很简单,确实答案是在以前链接的帖子中找到的;
<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;”并且“浮动;右”使条形从右向左移动.