如何在bootstrap中键入进度条？

Question

很高兴见到你！

我对bootstrap有疑问。所以我基本上都有这个进度条，我已经设法显示当前进度的百分比和百分比（显示每日水流量/所需的全部进度）。现在我想在右侧显示剩余的ml（百分比），如图所示：20％完成/ 80％剩余。我希望你得到我想要的东西，抱歉我的英语，我不是本地人。

到目前为止，这是我的代码：

                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">800 ml (20%)
                            </div>
                        </div>

Answer 1

尝试将文本放在两个span中，一个向左浮动，一个向右浮动，clearfix包含进度条。

Answer 2

这样的东西？

＆＃13;

＆＃13;

x:Key

＆＃13;

BasedOn

＆＃13;

＆＃13;

＆＃13;

Answer 3

这个效果很好：

为css添加了新样式

.progress-bar1 {
font-size: 12px;
line-height: 20px;
color: #000;
text-align: center;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}

将html更改为：

 <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" aria-valuenow="20"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 20%">800 ml (20%)
                            </div><p class="progress-bar1 text-center">140</p>
                        </div>

结果：