Bootstrap 3进度条百分比将显示在其下方(Bootstrap 3 progress bar percentages to be displayed under it)

这是默认的bootstrap堆叠进度条。 我希望能够在白色空间中显示进度条下的百分比而不是它。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
                  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:13%">13%</div>
                  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:7%">7%</div>
                  <div class="progress-bar progress-bar-success" role="progressbar" style="width:80%">80%</div>
                </div> 
  
 
 
 谢谢您的帮助。 
This is the default bootstrap stacked progress bar. I would like to be able to show the percentages under the progress bar in white space instead of on it.
 
 
 
  
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
                  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:13%">13%</div>
                  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:7%">7%</div>
                  <div class="progress-bar progress-bar-success" role="progressbar" style="width:80%">80%</div>
                </div> 
  
 
 
Thanks for the help.
                
最满意答案
                
                    
                        
 简单地把它放在新的div中，添加一些样式，你就完成了。 例： 
 
 
 
  
  
.progress-desc {
  margin-top: -1.5em;
}
.progress-desc div {
  display: block;
  float: left;
  text-align: center;
} 
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:13%"></div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:7%"></div>
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:80%"></div>
</div>
<div class="progress-desc">
  <div style="width:13%">13%</div>
  <div style="width:7%">7%</div>
  <div style="width:80%">80%</div>
</div> 
  
 
Simply put it in new div, add some styling and you're done. example:
 
 
 
  
  
.progress-desc {
  margin-top: -1.5em;
}
.progress-desc div {
  display: block;
  float: left;
  text-align: center;
} 
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:13%"></div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:7%"></div>
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:80%"></div>
</div>
<div class="progress-desc">
  <div style="width:13%">13%</div>
  <div style="width:7%">7%</div>
  <div style="width:80%">80%</div>
</div>