BootStrap 3プログレスバーラベルカットオフ

プログレスバーのサイズに関係なくテキストが完全に表示されるプログレスバーを作成しようとしています。私はどのオプションを追加するかわからないので、Java Application Developmentのスパンのテキストをプログレスバー自体より大きくすることができます。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プログレスバーラベルカットオフ

答えて

関連する問題