15

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

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

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

9 回答 9

13

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

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

添加样式“显示：块；” 并且“float; right”使条形图从右向左移动。

于 2013-06-04T05:48:44.343 回答
13

除了接受的答案，在 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>
于 2018-11-13T17:37:49.850 回答
6

在 Bootstrap 4 中，只需将带有类的 div 更改.progress为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>
于 2019-01-14T16:10:31.133 回答
4

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

progress {
  transform: rotate(180deg);
}

或者更好

progress {
  direction: rtl;
}
于 2019-03-10T05:16:44.997 回答
3

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

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

该.progress元素是块级元素，因此只需在其中浮动或.progress-bar放置您喜欢的任何位置。这是这个想法的快速小提琴供参考。

于 2014-12-19T23:56:51.617 回答
2

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

于 2018-05-09T11:19:25.890 回答
2

您可以将边距自动添加（.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>
于 2019-06-27T13:09:51.220 回答
0

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

于 2013-06-04T05:41:38.470 回答
0

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

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

.progress-bar{
  background-color: #e9ecef;
}
于 2018-03-18T16:11:05.633 回答