带有标签和最小宽度的堆叠进度条

Question

我的堆叠进度条看起来不错，每个进度条上都有百分比标签，但我不确定如何解决百分比导致进度条对于标签而言太小的问题。

设置最小宽度适用于非堆叠进度条，但会破坏堆叠进度条。

我怎样才能解决这个问题而又不破坏 bootstrap 太多？

示例 fiddle：http://jsfiddle.net/nimh/kx7hvxyz/

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

Answer 1

调整行高和字体大小怎么样？

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

Answer 2

想了一个晚上，意识到我可以添加最大宽度百分比和最小宽度百分比，以保持堆叠进度条至少足够宽以在两者上显示标签。

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

http://jsfiddle.net/nimh/kx7hvxyz/8/

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

带有标签和最小宽度的堆叠进度条

Stacked progress bars with labels and min-width

twitter-bootstrap-3