使用 CSS 的引导行中的动态列

Question

我想根据我传递的值将引导行分成不同的颜色。我想通过百分比。假设我的百分比是 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

给他们身份证

<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 */
}