当宽度为 0 时在进度条中显示文本

Question

我正在使用 Bootstrap 4.0.0 alpha 6：我不明白为什么当我的进度条宽度设置为 0 时，我仍然看到一些进度条。如果它为 0，我如何仍然显示文本而不显示栏？

.resume {
    width: 816px;
    margin: 48px 48px 48px 48px;
    font-size: 13px;
    line-height: 16px;
}
.header {
    text-align: center;
    line-height: 4px;
}
.header hr {
    margin: 5px;
}
.name {
    text-transform: uppercase;
    font-size: 32px;
}
.contact p {
    margin: 10px;
}
.summary h2, .skills h2, .professionalhistory h2, .education h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.skills {
    line-height: 13px;
}
.skills p {
    margin: 8px 8px 8px 8px;
}
.progress {
    background-color: #BCBEBF;
    text-align: left;
    position: relative;
    height: 13px;
    margin: 8px 8px 8px 8px;
}
.progress-bar {
    background-color: #323232;
    text-align: left;
    line-height: 13px;
    padding: 1px 10px 2px;
}
.progress-bar span {
    padding: 1px 10px 2px;
    position: absolute;
    z-index: 2;
    color: white;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
}
.employer {
    font-size: 16px;
    font-weight: bold;
}
.position {
    text-decoration: underline;
}
.description {
    width: 95%; 
    margin-left: 12px;
}
.results {
    font-weight: bold;
}
.titles {
    text-decoration: underline;
}

<script src="https://use.fontawesome.com/55fed2cea8.js"></script>
<html>
  <title>Home | Resume</title>
  <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
 </head>
 <body>
  <div class="container">
   <div class="resume">
    <div class="row">
     <div class="col-lg-12">
      <div class="header">
       <h1 class="name">Troy Andrew Pilewski</h1>
       <hr />
       <div class="contact">
       </div>
       <hr />
       <hr />
      </div>
      <div class="summary">
       <h2>Computer Information Systems Manager</h2>
       <ul class="fa-ul">
        <li><i class="fa-li fa fa-square"></i><b>Current US Government Top Secret Clearence</b></li>
        <li><i class="fa-li fa fa-square"></i><b>Extensive background in Information Systems management, operations and applications, </b>including advanced experience in Microsoft Operating Systems, Microsoft Server Applications, Microsoft Client Applications, VMWare Infrastructure and Maintenance, Cisco Network  Devices, Intrusion Detection and Prevention, Local Area Network (LAN) and Wide Area Network (WAN), Microsoft Office Applications</li>
        <li><i class="fa-li fa fa-square"></i><b>Advanced Software, Website and Database Development with specific languages and applications;</b> Microsoft Visual Basic .NET, Microsoft Visual Basic for Applications (VBA), Microsoft Access, Microsoft Office SharePoint Services (MOSS), Java</li>
        <li><i class="fa-li fa fa-square"></i><b>Demonstrated Success in Information Systems,</b> planned Domain Infrastructure Networks and Documented company policies and procedures</li>
        <li><i class="fa-li fa fa-square"></i><b>Successful Manager of teams of 10 to 150,</b> Documented personnel reviews, counseled team members and mentored their well-being</li>
        <li><i class="fa-li fa fa-square"></i><b>Industry Standard Certified Professional</b>, possessing certifications in Security+ (2009) and A+ (2011) from CompTIA; and a certification as a Sandler Sales Professional (2014)</li>
       </ul>
      </div>
      <div class="skills">
       <h2>Possesses Advance Knowledge Of</h2>
       <div class="row">
        <div id="col1" class="col-lg-4">
         <p>Microsoft Operating Systems</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>13 Years</span>
          </div>
         </div>
         <p>Microsoft Office SharePoint Services</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>7 Years</span>
          </div>
         </div>
         <p>Microsoft Active Directory</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>13 Years</span>
          </div>
         </div>
         <p>Microsoft Exchange Services</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>13 Years</span>
          </div>
         </div>
         <p>Microsoft Office Suite</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>13 Years</span>
          </div>
         </div>
         <p>Cisco Networking Devices</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>13 Years</span>
          </div>
         </div>
         <p>VMWare Products</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>9 Years</span>
          </div>
         </div>
        </div>
        <div id="col2" class="col-lg-4">
         <p>Project Management</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>5 Years</span>
          </div>
         </div>
         <p>Personnel Management</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>9 Years</span>
          </div>
         </div>
         <p>Training and Development</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>9 Years</span>
          </div>
         </div>
         <p>Customer Service Relations</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>8 Years</span>
          </div>
         </div>
         <p>Performance Management</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>9 Years</span>
          </div>
         </div>
         <p>Oral Expressive</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>13 Years</span>
          </div>
         </div>
         <p>Critical Thinker</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>13 Years</span>
          </div>
         </div>
        </div>
        <div id="col3" class="col-lg-4">
         <p>Complex Problem Solver</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>13 Years</span>
          </div>
         </div>
         <p>Attention to Detail</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>13 Years</span>
          </div>
         </div>
         <p>Sandler Sales Concepts</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>3 Years</span>
          </div>
         </div>
         <p>Visual Basic for Applications</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>9 Years</span>
          </div>
         </div>
         <p>Java Application Development</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>1 Years</span>
          </div>
         </div>
         <p>Microsoft Visual Studio</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>11 Years</span>
          </div>
         </div>
         <p>Microsoft SharePoint Designer</p>
         <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
           <span>5 Years</span>
          </div>
         </div>
        </div>
       </div>
      </div>
    </div>
   </div>
  </div>
 </body>
<html>

Answer 1

是因为虽然width为0，但是padding还是大于0，在你的width 0

之外加上padding: 0;

当宽度为 0 时在进度条中显示文本

Display text in progessbar when width is 0

html

css

boo

twitter-bootstrap