宽度为0时在进度栏中显示文本
[英]Display text in progessbar when width is 0
问题描述
I am using Bootstrap 4.0.0 alpha 6: I don't understand why when the width of my progressbars are set to 0, that I still see some of the progress bar. 
我正在使用Bootstrap 4.0.0 alpha 6：我不明白为什么当进度栏的宽度设置为0时，仍然看到一些进度栏。 How can I still show the text but not the bar if it is 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
It's because although the width is 0, the padding is still greater than 0. Add padding: 0; 这是因为尽管宽度为0，但是填充仍然大于padding: 0; in addition to your width 0 除了你的宽度0
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
以固定宽度在表格中显示文本 - Display text in table with a fixed width
标头宽度= 300像素时显示文本，否则设置显示：无； - Display text when header width = 300px, otherwise set display: none;
使用text-align：center时，网站的宽度突然溢出。 并显示：inline-block; - Width of website suddenly overflows when using text-align: center; and display: inline-block;
将多个元素的宽度显示为文本的最佳方法 - Best ways to display width of multiple elements as text
当标签中的文本大于此标签的宽度时，如何在与输入相同的行中显示标签？ - How to display label in the same line as input when text in label is bigger than width of this label?
如何以<a href>固定宽度</a>显示<a href>长文本</a> - How to display <a href> long text with fix width
设置宽度时文本无响应 - text is not responsive when width is set
使用设备宽度时，Retina 显示设备宽度不会自动适应 ipad - Retina display device width is not autofit in on ipad when using device width
CSS显示-将鼠标悬停在Width菜单上 - Css display - Width menu when hover on li
宽度小于800时显示滚动 - Display scrolling when the width is less than 800
相关标签