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

问题描述

我正在寻找一种在 Bootstrap 3 的响应式布局中交替行颜色的方法.如果没有大量广泛的、令人困惑的 CSS，我无法弄清楚如何做到这一点，并希望有人有更好的解决方案.

>

这是一个简单的前提:12 个 div 在大屏幕上显示为 4 行 3，在小屏幕上显示为 6 行 2，在移动设备上显示为 12 行 1.无论屏幕大小如何，这些行都需要具有交替的背景颜色.

Bootstrap 3 的 HTML 如下:

<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>

任何想法/提示/帮助将不胜感激.

解决方案

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

/* 对于小屏幕 */.row :nth-child(even){背景颜色:#dcdcdc；}.row :nth-child(odd){背景颜色:#aaaaaa;}/* 对于中等屏幕 */@media(最小宽度:768px){.row :nth-child(4n), .row :nth-child(4n-1) {背景:#dcdcdc;}.row :nth-child(4n-2), .row :nth-child(4n-3) {背景:#aaaaaa;}}/* 对于大屏幕 */@media(最小宽度:992px){.row :nth-child(6n), .row :nth-child(6n-1), .row :nth-child(6n-2) {背景:#dcdcdc;}.row :nth-child(6n-3), .row :nth-child(6n-4), .row :nth-child(6n-5) {背景:#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.

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