Разделитель в сетке

Андрей
Андрей
1,8K
3
Содержание:
  1. Комментарии
Приветствую. В адаптивной сетке «col-xs-6 col-md-3», при уменьшении размера экрана, когда из одной строки четыре элемента располагаются в двух строках по два, хотелось-бы добавлять разделитель типа между верхним и нижним рядом. Это возможно?

Комментарии: 3

  1. Андрей
    Андрей
    2016-04-06 13:56:50
    Имеется ввиду разделитель типа hr.
  1. Александр Мальцев
    Александр Мальцев
    2016-04-06 15:58:32
    Допустим у Вас такая разметка:
    <div class="col-xs-6 col-md-3">1 Блок</div>
    <div class="col-xs-6 col-md-3">2 Блок</div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-md-3">3 Блок</div>
    <div class="col-xs-6 col-md-3">4 Блок</div>
    <div class="clearfix"></div>
    <div class="col-xs-6 col-md-3">5 Блок</div>
    <div class="col-xs-6 col-md-3">6 Блок</div>
    <div class="clearfix visible-xs-block"></div>
    
    Вам необходимо добавить элемент hr только на xs устройствах после каждого 2 блока. Будет так:
    <div class="col-xs-6 col-md-3">1 Блок</div>
    <div class="col-xs-6 col-md-3">2 Блок</div>
    <div class="clearfix visible-xs-block"></div>
    <hr class="visible-xs-block">
    <div class="col-xs-6 col-md-3">3 Блок</div>
    <div class="col-xs-6 col-md-3">4 Блок</div>
    <div class="clearfix"></div>
    <hr class="visible-xs-block">
    <div class="col-xs-6 col-md-3">5 Блок</div>
    <div class="col-xs-6 col-md-3">6 Блок</div>
    <div class="clearfix visible-xs-block"></div>
    <hr class="visible-xs-block">
    
  • Андрей
    Андрей
    2016-04-06 16:52:30
    Супер, всё получилось, спасибо.