Question

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

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

编辑：这里的问题是我的进度条已停止/未动态获取背景颜色。我有多个进度条，它们显示的背景颜色比它们各自的进度条完成颜色（我们通过提供宽度显示）更亮。我做了一些更改，因为背景开始显示它背后的元素的颜色，而不是动态获得的颜色。将背景颜色设置为任何随机颜色不是要求

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

工作代码：

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

Answer 1

＆＃13;

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

＆＃13;

Answer 2

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

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

以下是示例：Example

我看到你使用了ng-style，我认为它正在使用angularJS，或类似的东西（我对它不太了解），所以我只是style，你可以制作它它回到你的服务器

Answer 3

希望这会对你有所帮助。

＆＃13;

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

＆＃13;

Bootstrap进度条背景颜色问题

3 个答案: