0
我正在尝试创建一个进度条,无论进度条的大小如何,都可以完整显示文本。我不确定要添加什么选项,以便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>
我想现在这一切是如何显示的,但我怎么把你的概念左对齐的所有标签? – TroyPilewski
嘿,我修改了我的解决方案。它可能需要一些左间距/填充,但你得到了要点。 –
完美!谢谢! – TroyPilewski