时间戳

首页 > 解决方案 > Bootstrap - 进度条作为卡片元素中的背景

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

问题描述

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

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

到目前为止我的结果

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

卡片元素中的进度条

标签： csstwitter-bootstrap

解决方案

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

推荐阅读