css - Bootstrap - 进度条作为卡片元素中的背景

Question

我正在尝试重新创建类似于下图(深色图像)的内容，它看起来像卡片的每个元素中的进度条。我快接近了，但到目前为止我遇到的问题是文本随进度条移动。

<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>

这就是目标，我该如何实现？

Answer 1

在你的内联样式中，添加: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>