ブートストラップ3プログレスバーの下に表示される割合。

Question

これは、ブートストラップがスタックされたデフォルトのプログレスバーです。進捗バーの下のパーセンテージを空白の代わりに表示することができます。助けのための

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

感謝。

Answer 1

新しい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>