Alterner les couleurs de ligne dans Bootstrap 3-Pas de Table

je trouve que si je spécifiez .row:nth-of-type(..), les autres éléments de ma rangée (pour d'autres formatage, etc.) ont aussi des couleurs alternées. Donc plutôt, je définirais dans mon css une toute nouvelle classe:

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

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

donc maintenant, les couleurs alternées de la rangée ne s'appliqueront qu'au conteneur de la rangée, quand je spécifie sa classe comme .row-striped, et non pas les éléments à l'intérieur de l' 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>/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>/salad</small>
        </div>
    </div>
</div>

Vous pouvez utiliser ce code :

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

Démo : http://codepen.io/mouhammed/pen/rblsC

il n'y a pas vraiment de façon de faire cela sans que la css soit un peu alambiquée, Mais voici la solution la plus propre que j'ai pu mettre en place (les points de rupture dans ce sont juste pour des fins d'exemple, les changer pour n'importe quels points de rupture que vous utilisez réellement.) La clé est :nth-of-type (ou :nth-child -- pourrait fonctionner dans ce cas.)

plus petit point de vue:

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

  .row div {
     background: #eee;
   }

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

}

Support de fenêtre:

@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;
  }

}

plus grand point de vue:

@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;
  }
}

violon de travail ici

Le fil est un peu vieux. Mais d'après le titre, j'ai pensé que c'était prometteur pour mes besoins. Malheureusement, ma structure ne se prêtait pas facilement à la solution du nième type. Voici une solution de 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>