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>