Bootstrap 进度条背景颜色问题答案

【问题标题】：Bootstrap Progress bar background-color issueBootstrap 进度条背景颜色问题
【发布时间】：2015-07-25 09:04:39
【问题描述】：

我的手风琴面板中有引导进度条。我想改变进度条的背景颜色。但它采用手风琴面板的背景颜色。当我给出静态值而不是 less 变量时，它采用背景颜色。

<div class="panel">
  <div class="panel-heading>
    <h3 class="panel-title">
        <div class="progress-broad">
            <div class="progress-bar progress-bar-success progress-bar-striped"
                 ng-style="width:50%">
            </div>
        </div>
     </h3>
 </div>

编辑：这里的问题是我的进度条停止/没有动态地采用背景颜色。我有多个进度条显示的背景颜色比它们各自的进度条完成颜色浅（我们通过提供宽度来显示）。我做了一些更改，因为背景开始显示其背后元素的颜色，而不是动态显示的颜色。将背景颜色设置为任何随机颜色不是必需的

解决方案：我发现在进行更改时，我删除了 class="progress"。所以我再次添加了进度类并且它起作用了。如果有人遇到类似问题，请确保 class="progress" 在那里。

工作代码：

<div class="panel">
  <div class="panel-heading>
    <h3 class="panel-title">
        <div class="progress">
            <div class="progress-broad">
                <div class="progress-bar progress-bar-success progress-bar-striped"
                     ng-style="width:50%">
                </div>
            </div>
        </div>
    </h3>
</div>

【问题讨论】：

你能添加一些代码吗？
@Vann'TileIanito 添加了。

标签： html css twitter-bootstrap

【解决方案1】：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.progress-bar
{
background-color: orange !important;
}
</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Basic Progress Bar</h2>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      <span class="sr-only">70% Complete</span>
    </div>
  </div>
</div>

</body>
</html>

【讨论】：

或使用链接：bootstrapdesigntools.com/tools/bootstrap-progress-bar-designer

【解决方案2】：

你应该坚持使用引导方法来制作进度条。

我将类从 progressbar-broad 更改为 progressbar，并添加了定义进度条所需的属性。

示例如下：Example

我看到你使用了ng-style，我认为它与 angularJS 或类似的东西一起工作（我不太了解），所以我只做了style，你可以让它回到你的服务器

【讨论】：

使用链接：bootstrapdesigntools.com/tools/bootstrap-progress-bar-designer

【解决方案3】：

希望这会对你有所帮助。

<!DOCTYPE html>
<html>
<head>
   <title>Progress Bar</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<h1>Sucess Progress Bar</h1>

<div class="progress progress-striped">
	<div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 60%;">
  	</div>
</div>

</body>
</html>

【讨论】：