进度条根本不显示答案

【问题标题】：progress bar is not showing at all进度条根本不显示
【发布时间】：2018-06-19 14:11:02
【问题描述】：

我正在使用通过npm SCSS @import './../../../node_modules/bootstrap/scss/bootstrap.scss'; and custom theme CSS 安装的引导程序作为我的模板，但不知何故根本没有显示进度条。它只是从我的页面中丢失。

<div class="row">
  <div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      <span class="sr-only">40% Complete (success)</span>
    </div>
  </div>
</div>

同样的问题也存在，只是缺少课程。 NPM 引导版本是 ^4.1.1。检查 DOM 中创建的元素我看到进度条 css 在那里，所以引导程序正在工作，为什么没有进度条？

【问题讨论】：

提供mcve。此外，col 应该是 row 的直接子代，你错过了 - 所以你的进度有 width: 0;

标签： css twitter-bootstrap

【解决方案1】：

查看bootstrap docs:

在网格布局中，内容必须放在列中，并且只有列可以是行的直接子级。

用col 包裹你的progress，一切都会正常。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


<div class="row">
  <!-- This one has no width -->
  <div class="progress">
    <div class="progress-bar progress-bar bg-warning progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      <span class="sr-only">40% Complete (success)</span>
    </div>
  </div>
</div>

<div class="row">
  <div class="col">
    <!-- This one has width 100% -->
    <div class="progress">
      <div class="progress-bar progress-bar bg-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
        <span class="sr-only">40% Complete (success)</span>
      </div>
    </div>
  </div>
</div>

【讨论】：