Question

我使用bootstrap进度条，我希望它位于图像的中心。我还想减小进度条的大小，删除栏上方的灰色。我尝试用下面的图片来解释它：

https://i.stack.imgur.com/5ldHj.png

＆＃13;

.progress-bar-gray {
  background-color: #9A9A9A !important;
  color: #F5F4F3 !important;
  height: 2px !important;
  border: 2px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<img src="http://lorempixel.com/320/170" class="img-responsive">
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-gray" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
  </div>
</div>

＆＃13;

Answer 1

我通过删除<div class="progress progress-striped active"></div>来删除了“灰色条”，并将该图像作为div的背景图像，这样我就可以将进度条div放到内部并使用position: absolute;将其水平和垂直居中。完整的代码是beow。

#image {
  position: relative;
  background-image: url(https://lorempixel.com/320/170);
  width: 320px;
  height: 170px;
}

.progress-bar-gray {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #9A9A9A !important;
  color: #F5F4F3 !important;
  height: 2px !important;
  border: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div id="image">
  <div class="progress-bar progress-bar-gray" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
</div>

bootstrap进度条图像中心并删除进度条上方的灰色

1 个答案: