我正在尝试使用Bootstrap进度条,使其能够在图像周围以圆形包裹的方式显示。如下所示的HTML代码中,我仍然希望按照Bootstrap的方式在div中设置宽度。
“问题”:我如何使用Bootstrap进度条来将其包装在我的图像周围,并仍然能够在div中设置进度条?
这是我迄今为止尝试过的内容:片段示例 Codepen
CSS
“问题”:我如何使用Bootstrap进度条来将其包装在我的图像周围,并仍然能够在div中设置进度条?
这是我迄今为止尝试过的内容:片段示例 Codepen
CSS
.progress {
border-radius: 50%;
}
.progress-bar {
border-radius: 50%;
}
.wrapper > img {
position: absolute;
top: 0;
left: 0;
text-align: center;
}
HTML
<div class="container">
<div class="row">
<div class="page-header">Circle progress bar with image</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="wrapper">
<img src="holder.js/150x150" class="img-circle img-thumbnail" />
<div class="progress" style="height: 150px; width: 150px;">
<div class="progress-bar" style="width: 50%"></div>
</div>
</div>
</div>
</div>
</div>