Question

我在看Twitter引导程序。我正在尝试更改进度条的颜色，但实际上甚至无法显示该栏。

我的代码看起来像这样。我不知道出了什么问题，并尝试了一切。也许它是我正在使用的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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

看起来你没有使用正确的CSS类本身。请尝试使用“progress-bar”类而不是“bar”。例如：

<强> HTML

filter: grayscale(100%);

<强> CSS

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

请参考此参考： http://getbootstrap.com/components/#progress

改变Twitter引导程序进度条的颜色

2 个答案: