如果栏为空，则在引导进度条上显示文本答案

【问题标题】：Display text on bootstrap progress bar if bar is empty如果栏为空，则在引导进度条上显示文本
【发布时间】：2015-12-04 20:58:47
【问题描述】：

所以我有一个引导进度条，其中文本显示在栏中 - 我注意到文本仅在栏有一定数量的填充时显示，但如果栏为空，则不显示文本？

如果栏是空的、满的或介于两者之间的任何地方，我如何编辑此 HTML 以显示栏内的文本？

 <div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
    This is my text
  </div>
</div>

【问题讨论】：

标签： php html text progress-bar

【解决方案1】：

来自Bootstrap Docs

为确保标签文本即使在百分比较低的情况下仍然清晰易读，请考虑在进度条中添加最小宽度。

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

在你的情况下，也许这样的事情会起作用：

<div class="progress">
  <div class="progress-bar" role="progressbar" 
     aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" 
     style="min-width: 20%"> <!-- or use ems/pixels -->
    This is my text
  </div>
</div>

【讨论】：

这样做是没有意义的，如果bar中有0%，bar一定是空的。