使用CSS在bootstrap行中的动态列

Question

我想根据我传递的值将bootstrap行分成不同的颜色。我想传递百分比。假设我的百分比是30,40,20,10，我的div应该以相同的百分比显示为绿色，红色，黄色，紫色。

我的百分比是动态的，会发生变化。我怎么能这样做？

代码很简单

 <div class="row">
<div class="twenty"></div>    
<div class="forty"></div>  
<div class="ten"></div>  
<div class="thirty"></div> 
</div> 

我使用Angular 2组件传递类值

Answer 1

给他们id

<div class="row">
 <div class="your_class" id="first_row"></div>
 <div class="your_class" id="second_row"></div>
</div>

然后用css写下你想要的东西

#first_row {
  ... !important; /* in some cases */
}