如何在進度條引導旁添加文本？

Question

嗨我想在bootstrap中添加一些文本到進度條。我希望它看起來的方式是後續：

的Java：X-X-X-X-X-X-X-X-X-

C++：X-X-X-X-X-X-X-X-X-

，其中X-X-X-X-X-X-X-X-X-是進度條。

我已經寫了一些代碼，但我似乎無法獲得與進度欄內聯的文本。任何幫助都會有用。我只用bootstrap。

<div class="panel panel-default" style="height:500px;overflow:scroll"> 

         <div class ="panel panel-primary"> 
          <div class="panel-heading"> 
           <h4>Programming Proficiency</h4> 
          </div> 
          <div class="panel-body"> 
           <div class="alert alert-info"> 
            <div class="container"> 
             <p><h4>Java</h4><div class="progress col-md-2"></div></p> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 

Answer 1

您可以通過H4標籤上的CSS規則修復此問題。

JSFiddle demo.

更改HTML這樣的：

<h4 class="progress-label">Java</h4> 

和CSS是：

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