Bootstrap中的响应条纹

时间:2015-04-27 21:28:09

标签: twitter-bootstrap-3

我在BS3中有一个网格,可以在设备大小上有4个,2个或1个列。它的条带为4最大列宽。

<div class="row row-odd">
  <div class="col-md-3 col-sm-6"></div>
  <div class="col-md-3 col-sm-6"></div>
  <div class="col-md-3 col-sm-6"></div>
  <div class="col-md-3 col-sm-6"></div>
</div>
<div class="row row-even">
  <div class="col-md-3 col-sm-6"></div>
  <div class="col-md-3 col-sm-6"></div>
  <div class="col-md-3 col-sm-6"></div>
  <div class="col-md-3 col-sm-6"></div>
</div>

.row-even {
  background-color: #B2D6B2;
}
.row-odd {
  background-color: #D8ECC3;
}

这个工作正常,但理想情况下我会喜欢它的条纹响应,实际上看起来很好。

前4个细胞颜色相同。我希望只有前2个或前1个单元格具有相同的颜色,具体取决于分辨率,因此它看起来条纹化为用户。

所以在4列模式中我想要颜色1(C1)和2(C2)如下

C1C1C1C1C2C2C2C2C1C1C1C1C2C2C2C2(即4个块)

并以2列模式

C1C1C2C2C1C1C2C2(即2的嵌段)

和1列模式

C1C2C1C2C1C2C1C2(即1的嵌段)

我该怎么做?

我有一个小提琴:

http://jsfiddle.net/GrimRob/1cj2e828/3/

0 个答案:

没有答案