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

Автор: Александр Мальцев

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

Если статья понравилась, то поделитесь ей в социальных сетях:

Дата публикации

06-04-2016

Избранное

Просмотры

293

Нравится

Комментарии (3)

Андрей 06 апреля 2016, 13:56 # 0

Имеется ввиду разделитель типа hr.

Александр Мальцев 06 апреля 2016, 15:58 # 0

Допустим у Вас такая разметка:

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

Андрей 06 апреля 2016, 16:52 # 0

Супер, всё получилось, спасибо.

Вы должны авторизоваться, чтобы оставлять комментарии.