如果进度条为空，则在 bootstrap 进度条上显示文本

Question

所以我有一个 bootstrap 进度条，其中文本显示在进度条内 - 我注意到文本仅在进度条有一些填充量时显示，但如果进度条是空的，文字没有显示？

如果栏是空的、满的或介于两者之间的任何地方，我如何编辑此 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>

Answer 1

来自Bootstrap Docs

To ensure that the label text remains legible even for low percentages, consider adding a min-width to the progress bar.

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

如果进度条为空，则在 bootstrap 进度条上显示文本

Display text on bootstrap progress bar if bar is empty

html

php

text

progress-bar