Twitter bootstrap 3 带标签和最小宽度的堆叠进度条

我的堆叠进度条看起来不错，每个进度条上都有百分比标签，但我不知道如何解决百分比导致进度条太小而无法显示标签的问题

设置最小宽度适用于非堆叠进度条，但会打断堆叠进度条

我怎样才能在不太破坏引导的情况下修复这个问题

小提琴示例：

+89.74%
-10.26%
+10.26%
-89.74%

---

如何处理行高和字体大小

      [1]: http://www.bootply.com/Tq7YbaeOX5

/* CSS used here will be applied after bootstrap.css */
.max-width {
    max-width: 25em;
}
/* .progress-bar {
    min-width: 4em;
} */

.progress-bar {
    padding: 4px;
    line-height: 12px;

  }
  .text-Left {
    font-size: 12px;
    float: left;
    }

  .text-left, .text-right {
font-size: 7px;
      padding-right:5px;
  }
  .text_Right {
      float: right;
    }


<div class="container-fluid">
    <div class="row-fluid">
        <div class="panel panel-default max-width">
            <div class="panel-body">
                <div class="progress">
                    <div class="progress-bar progress-bar-success" style="width: 89.74%">
                        <div class="text-Left">+89.74%</div>
                    </div>
                    <div class="progress-bar progress-bar-danger" style="width: 10.26%">
                        <div class="text-right">-10.26%</div>
                    </div>
                </div>
                                <div class="progress">
                    <div class="progress-bar progress-bar-success" style="width: 10.26%">
                        <div class="text-left">+10.26%</div>
                    </div>
                    <div class="progress-bar progress-bar-danger" style="width: 89.74%">
                        <div class="text_Right">-89.74%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

[1]：http://www.bootply.com/Tq7YbaeOX5
/*此处使用的CSS将在bootstrap.CSS之后应用*/
.最大宽度{
最大宽度：25em；
}
/*.进度条{
最小宽度：4em；
} */
.进度条{
填充：4px；
线高：12px；
}
.左文本{
字体大小：12px；
浮动：左；
}
.text left、.text right{
字体大小：7px；
右侧填充：5px；
}
.text_右{
浮动：对；
}
+89.74%
-10.26%
+10.26%
-89.74%

花了一个晚上来思考，意识到我可以添加一个最大宽度百分比和一个最小宽度百分比，以保持堆叠的进度条至少足够宽，以便在两个进度条上都显示标签

.progress-bar {
min-width: 15%;
max-width: 85%;
}

---

它并不完美（99%和1%的比例看起来可能很有趣），但可以根据我们的需要随时显示标签。

为什么不试试右边的百分比文本@AdamJosephLooze我们想显示堆叠进度条的两个百分比，以便更好地一眼就能理解数据。

.progress-bar {
min-width: 15%;
max-width: 85%;
}