寬度為0時在進度欄中顯示文本
[英]Display text in progessbar when width is 0
問題描述
我正在使用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>
1 個解決方案
解決方案1
1 已采納 2017-03-10 21:15:37
這是因為盡管寬度為0，但是填充仍然大於padding: 0; 除了你的寬度0
使用text-align：center時，網站的寬度突然溢出。 並顯示：inline-block;
[英]Width of website suddenly overflows when using text-align: center; and display: inline-block;
當標簽中的文本大於此標簽的寬度時，如何在與輸入相同的行中顯示標簽？
[英]How to display label in the same line as input when text in label is bigger than width of this label?
使用設備寬度時，Retina 顯示設備寬度不會自動適應 ipad
[英]Retina display device width is not autofit in on ipad when using device width
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.