BootStrap 3進度條標籤中斷

我正在嘗試創建一個進度條，無論進度條的大小如何，都可以完整顯示文本。我不確定要添加什麼選項，以便Java應用程序開發中的跨度文本可以大於進度欄本身。BootStrap 3進度條標籤中斷

.resume { 
 
    width: 816px; 
 
    margin: 48px 48px 48px 48px; 
 
    font-size: 13px; 
 
    line-height: 16px; 
 
} 
 

 
.header { 
 
    text-align: center; 
 
    line-height: 4px; 
 
} 
 

 
.name { 
 
    text-transform: uppercase; 
 
    font-size: 32px; 
 
} 
 

 
.summary h2, .skills h2, .professionalhistory h2 { 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-size: 24px; 
 
} 
 

 
.skills { 
 
    line-height: 13px; 
 
} 
 

 
.skills p { 
 
    margin: 8px 8px 8px 8px; 
 
} 
 

 
.progress { 
 
    text-align: left; 
 
    position: relative; 
 
    height: 13px; 
 
    margin: 8px 8px 8px 8px; 
 
} 
 

 
.progress span { 
 
    display: inline; 
 
    position: absolute; 
 
    color: black; 
 
} 
 

 
.progress-bar { 
 
    text-align: left; 
 
    position: relative; 
 
    line-height: 13px; 
 
    padding: 0px 10px; 
 
} 
 

 
.progress-bar span { 
 
    display: inline; 
 
}

<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 

 
<div class="skills" style="line-height: 13px;"> 
 
    <h2 style="text-align: center; text-transform: uppercase; font-size: 24px;">Possesses Advance Knowledge Of</h2> 
 
    <div class="row"> 
 
     <div class="col-lg-4"> 
 
      <p style="margin: 8px 8px 8px 8px;">Java Application Development</p> 
 
      <div class="progress" style="text-align: left; position: relative; height: 13px; margin: 8px 8px 8px 8px;"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:7.69%; padding: 0px 10px;"> 
 
        <span style="display: inline;">1 Years</span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-03-06 TroyPilewski

一種可能的解決方案是以下內容。這是發生了什麼變化

.progress-bar span { 
     position: absolute; 
     z-index: 2; 
     color: black; 
     top: 50%; 
     left: 0%; 
     transform: translate(0%,-50%); 
}

.resume { 
 
    width: 816px; 
 
    margin: 48px 48px 48px 48px; 
 
    font-size: 13px; 
 
    line-height: 16px; 
 
} 
 

 
.header { 
 
    text-align: center; 
 
    line-height: 4px; 
 
} 
 

 
.name { 
 
    text-transform: uppercase; 
 
    font-size: 32px; 
 
} 
 

 
.summary h2, .skills h2, .professionalhistory h2 { 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-size: 24px; 
 
} 
 

 
.skills { 
 
    line-height: 13px; 
 
} 
 

 
.skills p { 
 
    margin: 8px 8px 8px 8px; 
 
} 
 

 
.progress { 
 
    text-align: left; 
 
    position: relative; 
 
    height: 13px; 
 
    margin: 8px 8px 8px 8px; 
 
} 
 

 
.progress-bar { 
 
    text-align: left; 
 
    line-height: 13px; 
 
    padding: 0px 10px; 
 
} 
 

 
.progress-bar span { 
 
    position: absolute; 
 
    z-index: 2; 
 
    color: black; 
 
    top: 50%; 
 
    left: 0%; 
 
    transform: translate(0%,-50%); 
 
}

<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 

 
<div class="skills"> 
 
    <h2>Possesses Advance Knowledge Of</h2> 
 
    <div class="row"> 
 
     <div class="col-lg-4"> 
 
      <p>Microsoft Operating Systems</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100%"> 
 
        <span>13 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Microsoft Office SharePoint Services</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:53.85%"> 
 
        <span>7 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Microsoft Active Directory</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100%"> 
 
        <span>13 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Microsoft Exchange Services</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100%"> 
 
        <span>13 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Microsoft Office Suite</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100%"> 
 
        <span>13 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Cisco Networking Devices</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100%"> 
 
        <span>13 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>VMWare Products</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:69.23%"> 
 
        <span>9 Years</span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-4"> 
 
      <p>Project Management</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:38.46%"> 
 
        <span>5 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Personnel Management</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:69.23%"> 
 
        <span>9 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Training and Development</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:69.23%"> 
 
        <span>9 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Customer Service Relations</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:61.54%"> 
 
        <span>8 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Performance Management</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:69.23%"> 
 
        <span>9 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Oral Expressive</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100.00%"> 
 
        <span>13 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Critical Thinker</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100.00%"> 
 
        <span>13 Years</span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-4"> 
 
      <p>Complex Problem Solver</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100.00%"> 
 
        <span>13 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Attention to Detail</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100.00%"> 
 
        <span>13 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Sandler Sales Concepts</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:23.08%"> 
 
        <span>3 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Visual Basic for Applications</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:69.23%"> 
 
        <span>9 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Java Application Development</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:7.69%"> 
 
        <span>1 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Microsoft Visual Studio</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:84.62%"> 
 
        <span>11 Years</span> 
 
       </div> 
 
      </div> 
 
      <p>Microsoft SharePoint Designer</p> 
 
      <div class="progress"> 
 
       <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:38.46%"> 
 
        <span>5 Years</span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-03-06 23:01:13

我想現在這一切是如何顯示的，但我怎麼把你的概念左對齊的所有標籤？ – TroyPilewski

嘿，我修改了我的解決方案。它可能需要一些左間距/填充，但你得到了要點。 –

完美！謝謝！ – TroyPilewski

BootStrap 3進度條標籤中斷

回答

相關問題