关于自定义bootstrap进度条的问题

Question

第一个问题：在我的Bootstrap进度条中，我添加了一个标签来显示进度条的状态。但是，bootstrap 默认情况下将文本居中，但我希望它向右浮动，并且紧挨着进度条的末尾。我试过将文本放在 h6 标签中，然后使用 float: right 对其进行样式设置，但这似乎没有任何改变。那么，我怎样才能使文本正确浮动呢？

第二个问题：我也希望能够改变条形的颜色，但它仍然具有 Bootstrap 所具有的条纹和动画效果。有没有办法做到这一点或没有？所以理想情况下，条形可以像紫色或其他东西，但仍然是条纹并显示动画。

下面是我目前正在使用的图片，如果它有帮助的话： Here

这是我用来制作上述内容的代码：

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 76%">
        <h6 style="font-weight: thin; font-size: 13px;">Complete!</h6>
    </div>
</div>

提前致谢！

Answer 1

float: right; 不工作，因为进度条使用 flexbox 属性.

在您的 <h6> 标签上尝试 align-self: flex-end;。

.progress-bar {
  background-color: purple !important;
}

<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  </head>
  <body>
    <div class="progress">
           <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 76%">
               <h6 style="font-weight: thin; font-size: 13px; align-self: flex-end;">Complete!</h6>
            </div>
    </div>
  </body>
</html>

关于自定义bootstrap进度条的问题

Questions about customizing bootstrap progress bar

html

css

styling

progress-bar

bootstrap-4