我正在尝试重新创建类似于下图(深色图像)的内容,它看起来像卡片的每个元素中的进度条。我快接近了,但到目前为止我遇到的问题是文本随进度条移动。
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item progress-bar bg-success" style="width:40%"><a>Cras justo odio</a></li>
<li class="list-group-item progress-bar bg-info" style="width:100%">Dapibus ac facilisis in</li>
<li class="list-group-item progress-bar bg-warning" style="width:10%">Vestibulum at eros</li>
</ul>
</div>
这就是目标,我该如何实现?
最佳答案
在你的内联样式中,添加:text-align: left;左填充:10px; 像这样:
<li class="list-group-item progress-bar bg-warning" style="width:10% text-align: left; padding-left: 10px;">Vestibulum at eros</li>
关于css - Bootstrap - 进度条作为卡片元素中的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56395759/