引导3中的交替行颜色 - 无表 [英] Alternating Row Colors in Bootstrap 3 - No Table

问题描述

我正在寻找一种方法在Bootstrap 3的响应式布局中交替行颜色。我不知道如何做没有大量的广泛，令人困惑的CSS，希望有人有一个更好的解决方案。 p>

这里是一个简单的前提：12个div在大屏幕上显示为4行3，在小屏幕上显示6行2，在移动设备上显示12行1。

Bootstrap 3的HTML如下：

 < div class =container> 
< div class =row> 
< div class =col-md-4 col-sm-6 col-xs-12> Emp-01< / div> 
< div class =col-md-4 col-sm-6 col-xs-12> Emp-02< / div> 
< div class =col-md-4 col-sm-6 col-xs-12> Emp-03< / div> 
< div class =col-md-4 col-sm-6 col-xs-12> Emp-04< / div> 
< div class =col-md-4 col-sm-6 col-xs-12> Emp-05< / div> 
< div class =col-md-4 col-sm-6 col-xs-12> Emp-06< / div> 
< div class =col-md-4 col-sm-6 col-xs-12> Emp-07< / div> 
< div class =col-md-4 col-sm-6 col-xs-12> Emp-08< / div> 
< div class =col-md-4 col-sm-6 col-xs-12> Emp-09< / div> 
< div class =col-md-4 col-sm-6 col-xs-12> Emp-10< / div> 
< div class =col-md-4 col-sm-6 col-xs-12> Emp-11< / div> 
< div class =col-md-4 col-sm-6 col-xs-12> Emp-12< / div> 
< / div> 
< / div> 
  

任何想法/提示/帮助都将非常感激。

bootstrap ，并且您希望为每个屏幕尺寸交替行颜色，您需要为所有屏幕尺寸编写单独的样式规则。

  / *对于小萤幕* / 
 .row：nth-​​child（even）{
 background -color：#dcdcdc; 
} 
 .row：nth-​​child（odd）{
 background-color：#aaaaaa; 
} 
 
 / *对于中等屏幕* / 
 @media（min-width：768px）{
 .row：nth-​​child（4n），.row ：nth-​​child（4n-1）{
 background：#dcdcdc; 
} 
 .row：nth-​​child（4n-2），.row：nth-​​child（4n-3）{
 background：#aaaaaa; 
} 
} 
 
 / *对于大屏幕* / 
 @media（min-width：992px）{
 .row：nth-​​child 6n），.row：nth-​​child（6n-1），.row：nth-​​child（6n-2）{
 background：#dcdcdc; 
} 
 .row：nth-​​child（6n-3），.row：nth-​​child（6n-4），.row：nth-​​child（6n-5）{
 background ：#aaaaaa; 
} 
} 
  

工作 FIDDLE

我也在这里包含了引导CSS。

I am looking for a way to do alternating row colors in a responsive layout in Bootstrap 3. I cannot figure out how to do it without a LOT of extensive, confusing CSS and was hoping that someone had a better solution.

Here is the simple premise: 12 divs that display as 4 rows of 3 on large screens, 6 rows of 2 on small screens, and 12 rows of 1 on mobile. The rows will need to have alternating background colors regardless of screen size.

The HTML for Bootstrap 3 is as follows:

<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-01</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-02</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-03</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-04</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-05</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-06</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-07</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-08</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-09</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-10</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-11</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-12</div>
    </div>
</div>

Any thoughts/hints/help would be greatly appreciated.

解决方案

Since you are using bootstrap and you want alternating row colors for every screen sizes you need to write separate style rules for all the screen sizes.

/* For small screen */
.row :nth-child(even){
  background-color: #dcdcdc;
}
.row :nth-child(odd){
  background-color: #aaaaaa;
}

/* For medium screen */    
@media (min-width: 768px) {
    .row :nth-child(4n), .row :nth-child(4n-1) {
        background: #dcdcdc;
    }
    .row :nth-child(4n-2), .row :nth-child(4n-3) {
        background: #aaaaaa;
    }
}

/* For large screen */
@media (min-width: 992px) {
    .row :nth-child(6n), .row :nth-child(6n-1), .row :nth-child(6n-2) {
        background: #dcdcdc;
    }
    .row :nth-child(6n-3), .row :nth-child(6n-4), .row :nth-child(6n-5) {
        background: #aaaaaa;
    }
}

Working FIDDLE
I have also included the bootstrap CSS here.

这篇关于引导3中的交替行颜色 - 无表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！