ブートストラップと一緒にラベルを進捗バーで表示する方法は？

Question

私はこれらのラベルは次のようにアップsettedたい：

のJava ---------プログレスバー-----------

のC＃------- --progressバー-----------

これは私の現在のコードです：

<div class="container"> 
      <p> 
       C# 
      </p> 
      <div class="progress" id="prog1"> 
       <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> 
       <span class="sr-only">20% Complete</span> 
       </div> 
      </div> 
     </div> 

Answer 1

シンプルfloatとmargin

であなたの paragraph tagへ progress-labelクラスを追加3210

.progress-label { 
 
    float: left; 
 
    margin-right: 1em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <p class="progress-label"> 
 
    C# 
 
    </p> 
 
    <div class="progress" id="prog1"> 
 
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> 
 
     <span class="sr-only">20% Complete</span> 
 
    </div> 
 
    </div> 
 
</div>