我有一个进度条列表，我希望看到它的动画效果。当我使用 maxcdn 时，我看到它们是动画的，但如果我使用本地 Bootstrap 引用，则不是。请帮助我了解哪里出了问题...
.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;
}<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>
<body>
<p>Microsoft Office SharePoint Services</p>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:53.85%">
<span>7 Years</span>
</div>
</div>
</body>在代码片段中我使用的是 maxcdn，但如果我删除 maxcdn，进度条仍会显示但不会显示动画。我不确定为什么。引导版本为 4.0.0 alpha 6。
最佳答案
In Bootstrap 4您需要将类 progress-bar-animated 添加到 progress-bar 元素。
.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;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<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:53.85%">
<span>7 Years</span>
</div>
</div>
</body>关于html - 进度条不动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42658485/