为什么进度条不可见？

Question

我正在尝试修复底部的进度条，但它不可见...

.sticky-progress-bar {
  position: fixed;
  bottom: -4px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="progress sticky-progress-bar">
 
  <div class="progress-bar w-50 progress-bar-striped progress-bar-animated">
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 1

你需要给它一个宽度

.progress {
  width: 100%;
}

Answer 2

你的进度div没有内容，所以你的width是0，你可以设置width:100%就可以了。

.sticky-progress-bar {
  position: fixed;
  bottom: -4px;
  width: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="progress sticky-progress-bar">
 
  <div class="progress-bar w-50 progress-bar-striped progress-bar-animated">
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 3

正如其他人所回答的那样，问题是由于宽度不足，但我相信您还需要回答 为什么 您的 <div> 需要宽度。

由于 block 的默认显示，<div> 默认占据其父项的整个宽度。 position:fixed 本质上是将元素从文档流中剔除，不再考虑父元素的宽度，而是依赖于它自己的宽度值。未设置宽度时，默认为 0，这就是您看不到进度条的原因。

Answer 4

您只需要在进度中添加width:100% class。

.progress {
  width: 100%;
}

而且你的进步将是可见的！

为什么进度条不可见？

Why progress bar is not visible?

html

javascript

css

css-position

twitter-bootstrap