Question

我的堆叠进度条看起来不错，每个都有百分比标签，但我不知道如果百分比导致条形对于标签太小，怎么解决。

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

如何在不破坏引导程序的情况下解决这个问题？

示例小提琴：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

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

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

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

它并不完美（可能看起来很有趣，只有99％和1％），但可以随时为我们的需求展示标签。

Answer 2

玩线高和字体大小怎么样？

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

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

2 个答案: