poner - hojas de estilo css para tablas

Colores de fila alternativos en Bootstrap 3-Sin tabla

Question

Estoy buscando una forma de hacer filas de colores alternas en un diseño receptivo en Bootstrap 3. No puedo encontrar la manera de hacerlo sin MUCHOS extensos y confusos CSS y esperaba que alguien tuviera una mejor solución.

Aquí está la premisa simple: 12 divs que se muestran como 4 filas de 3 en pantallas grandes, 6 filas de 2 en pantallas pequeñas y 12 filas de 1 en el móvil. Las filas necesitarán colores de fondo alternativos independientemente del tamaño de la pantalla.

El HTML para Bootstrap 3 es el siguiente:

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

Cualquier pensamiento / pista / ayuda sería muy apreciado.

Answer 1

El hilo es un poco viejo. Pero desde el título pensé que era prometedor para mis necesidades. Desafortunadamente, mi estructura no se prestaba fácilmente a la solución de tipo n-ésimo. Aquí hay una solución 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>

Answer 2

Encuentro que si especifico .row:nth-of-type(..) , los elementos de mi otra fila (para otro formato, etc.) también obtienen colores alternados. Entonces, más bien, definiría en mi CSS una clase completamente nueva:

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

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

Entonces, los colores de las filas alternas solo se aplicarán al contenedor de filas, cuando especifique su clase como .row-striped , y no los elementos dentro de la 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>

Answer 3

No hay realmente una manera de hacer esto sin que el CSS se vuelva un poco intrincado, pero aquí está la solución más limpia que pude armar (los puntos de interrupción en esto son solo para propósitos de ejemplo, cámbielos a cualquier punto de interrupción que realmente esté usando). La clave es :nth-of-type (o :nth-child - cualquiera funcionaría en este caso).

La ventana más pequeña:

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

  .row div {
     background: #eee;
   }

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

}

Visor medio:

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

}

La ventana más grande:

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

Violín de trabajo here

Answer 4

Puedes usar este código:

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

Demostración : http://codepen.io/mouhammed/pen/rblsC

Answer 5

Ya que está utilizando el programa de arranque y quiere colores de filas alternados para cada tamaño de pantalla, necesita escribir reglas de estilo separadas para todos los tamaños de pantalla.

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

Trabajo FIDDLE
También he incluido el bootstrap CSS aquí.