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

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