html - 更改 Twitter bootstrap 进度条的颜色

Question

我正在查看 Twitter Bootstrap 。我正在尝试更改进度条的颜色，但实际上甚至无法显示进度条。

我的代码如下所示。我不知道出了什么问题并且已经尝试了一切。也许这是我使用的 bootstrap 版本

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

HTML

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

CSS

.bar {
    background-color: green;
} 

Answer 1

您应该将 .bar 元素的 height 设置为 100%，否则它的高度将为 0(因为它不有任何内容)。

.bar {
  background-color: green;
  height: 100%;
} 

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>