在Bootstrap 3中交替行颜色 - 没有表格

Question

我正在寻找一种在Bootstrap 3中实现交替行颜色的响应式布局方法。我无法想出一种不需要大量复杂且令人困惑的CSS代码的方法，希望有人能提供更好的解决方案。

这是一个简单的前提条件：12个div元素，在大屏幕上以3行4列的方式显示，在小屏幕上以2行6列的方式显示，在移动设备上则以1行12列的方式显示。行需要具有交替的背景颜色，而不受屏幕大小的影响。

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>

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

- Trick Kramer

---

如果有人正在使用Rails，那么cycle方法可能更容易：https://apidock.com/rails/ActionView/Helpers/TextHelper/cycle - BenKoshy

Answer 1

因为您正在使用 Bootstrap ，并且您希望对于每个屏幕大小交替显示行颜色，您需要编写适用于所有屏幕大小的不同样式规则。

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

在这里工作FIDDLE，同时我也已经包含了Bootstrap CSS。

- aniskhan001

---

谢谢！这比我之前做的简单多了。因为某种原因，我很难理解 "nth-child"。 - Trick Kramer

在处理复杂的nth-child模式时，只需进行计算即可。 ;) - aniskhan001

这会交替改变行中div的颜色，而不是整个行。或者我错过了什么？ - RichieHH

如果每个 div 总是自己的一行，那么它就可以工作。但事实并非如此。问题在于不同的断点有不同的行布局。 - A Coder

Answer 2

我发现如果我指定.row:nth-of-type(..)，我的其他行元素（用于其他格式等）也会获得交替颜色。因此，我会在我的CSS中定义一个全新的类：

.row-striped:nth-of-type(odd){
  background-color: #efefef;
}

.row-striped:nth-of-type(even){
  background-color: #ffffff;
}

所以现在，交替的行颜色只适用于行容器，当我将其类指定为.row-striped时，而不是row内部的元素。

<!-- this entire row container is #efefef -->
<div class="row row-striped">
    <div class="form-group">
        <div class="col-sm-8"><h5>Field Greens with strawberry vinegrette</h5></div>
        <div class="col-sm-4">
            <input type="number" type="number" step="1" min="0"></input><small>$30/salad</small>
        </div>
    </div>
</div>

<!-- this entire row container is #ffffff -->
<div class="row row-striped">
    <div class="form-group">
        <div class="col-sm-8"><h5>Greek Salad</h5></div>
        <div class="col-sm-4">
            <input type="number" type="number" step="1" min="0"></input><small>$25/salad</small>
        </div>
    </div>
</div>

- James Perih

Answer 3

你可以使用以下代码:

.row :nth-child(odd){
  background-color:red;
}
.row :nth-child(even){
  background-color:green;
}

Demo : http://codepen.io/mouhammed/pen/rblsC

- mouhammed

---

理论上，如果每个div始终是自己的一行，那么可以。但事实并非如此。问题在于不同的断点有不同的行布局。 - jack

Answer 4

没有一种方法可以避免css变得有点混乱，但以下是我能够整理出的最清晰的解决方案（这里的断点仅用于示例目的，请将它们更改为您实际使用的任何断点）。关键是使用:nth-of-type（或:nth-child-- 在这种情况下都可以使用）。

最小视口：

@media (max-width:$smallest-breakpoint) {

  .row div {
     background: #eee;
   }

  .row div:nth-of-type(2n) {
     background: #fff;
   }

}

中等视口：

@media (min-width:$smallest-breakpoint) and (max-width:$mid-breakpoint) {

  .row div {
    background: #eee;
  }

  .row div:nth-of-type(4n+1), .row div:nth-of-type(4n+2) {
    background: #fff;
  }

}

最大视口：

@media (min-width:$mid-breakpoint) and (max-width:9999px) {

  .row div {
    background: #eee;
  }

  .row div:nth-of-type(6n+4), 
  .row div:nth-of-type(6n+5), 
  .row div:nth-of-type(6n+6) {
      background: #fff;
  }
}

Working fiddle here

- jack

Answer 5

这个帖子有点老。但是从标题上看，我认为它符合我的需求。不幸的是，我的结构不太适合nth-of-type解决方案。这里提供一个Thymeleaf解决方案。

.back-red {
  background-color:red;
}
.back-green {
  background-color:green;
}


<div class="container">
    <div class="row" th:with="employees=${{'emp-01', 'emp-02', 'emp-03', 'emp-04', 'emp-05', 'emp-06', 'emp-07', 'emp-08', 'emp-09', 'emp-10', 'emp-11', 'emp-12'}}">
        <div class="col-md-4 col-sm-6 col-xs-12" th:each="i:${#numbers.sequence(0, #lists.size(employees))}" th:classappend'(${i} % 2) == 0?back-red:back-green"><span th:text="${emplyees[i]}"></span></div>
    </div>
</div>

- AixNPanes

Answer 6

我在使用Bootstrap表格条纹类(table-striped)时遇到了行颜色问题，后来意识到应该删除table-striped类并在CSS文件中进行设置。

tr:nth-of-type(odd)
{  
background-color: red;
}
tr:nth-of-type(even)
{  
background-color: blue;
}

Bootstrap 的 table-striped 类会覆盖你的选择器。

- David Morrow