Чередующиеся рядовые цвета в бутстрапе 3 - нет таблицы

Я ищу способ сделать чередующиеся цвета строк в отзывчивом макете в Bootstrap 3. Я не могу понять, как это сделать без большого, запутанного CSS, и надеялся, что у кого-то есть лучшее решение.

Вот простая предпосылка: 12 divs, которые отображаются как 4 строки по 3 на больших экранах, 6 строк по 2 на маленьких экранах и 12 строк по 1 на мобильном устройстве. Строки должны иметь переменные цвета фона независимо от размера экрана.

HTML для Bootstrap 3 выглядит следующим образом:

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

Любые мысли/подсказки/помощь будут очень признательны.

Ответ 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.

Ответ 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>

Ответ 3

Вы можете использовать этот код:

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

Демо: http://codepen.io/mouhammed/pen/rblsC

Ответ 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;
  }
}

Рабочая скрипка здесь

Ответ 5

Поток немного старый. Но из названия я думал, что это обещало мои потребности. К сожалению, моя структура не поддалась решению nth-of-type. Здесь решение Тимелеафа.

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