当我用包含position: fixed
的div包装进度条时,进度条刚刚消失:
.volume {
position: fixed;
top: 10px;
left: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="volume">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
我该如何解决?
答案 0 :(得分:2)
关于Mozilla开发人员指南中的positioning:
所以你的进度条在那里,但宽度为零。给它一个宽度,它将变得可见。
.volume {
position: fixed;
top: 10px;
left: 10px;
width: calc(100% - 20px);
}