Разное количество товаров в строке

[margokorablina]

Помогите, пожалуйста, разобраться почему так случилось.

Разное количество товаров строке в категория х после добавления тега h1 в отдельный блок сверху.

1 строка везде 3, далее - по 4 товара....

[margokorablina]

 Вопрос был решен переносом тега h1 выше по коду до строчек
      <div class="row">
        <?php foreach ($products as $product) { ?>

ранее он был после строки

     <div class="row">

У кого-нибудь есть понимание почему помещение тега h1 в блок row с товара привел к такому сдвигу?

[HyperLabTeam]

https://getbootstrap.com/docs/3.3/

[jaffagold]

Думаю, стили бутстрап не при чем.

Все дело в селекторах, с помощью которых формируют перенос блоков со строки на строку

(пример из демо ocStore):

@media (min-width: 1200px)

#content .col-lg-2:nth-child(6n+1), #content .col-lg-2:nth-child(6n+1), #content .col-lg-3:nth-child(4n+1), #content .col-lg-4:nth-child(3n+1), #content .col-lg-6:nth-child(2n+1) {

clear: left;

}

Таким образом формируется перенос блоков на новую строку с постоянным шагом. ( не вижу в этом особого смысла, они и так переносятся)

Особенность селектора с псевдоклассом :nth-child () в том, что тэг H1, который появился над карточками товаров был тоже включен в этот счет.

Поэтому в первой строке насчитали на 1 элемент больше и карточек товара вывели на одну меньше.

Все это легко проверяется в инспекторе кода.

Если заменить

:nth-child 

на

:nth-of-type

то глюк пропадает.

Вывод:

Или не вносить в div.row ничего лишнего, кроме карточек товара.

Или поменять селекторы.

http://htmlbook.ru/css/nth-child

http://htmlbook.ru/css/nth-of-type

P.S.

Если отключить в данном куске кода стиль

clear: left;

то станет очевидно, что в отображении страницы ничего не случилось. Пока не могу себе представить ситуацию, когда этот стиль имел бы решающее значение. Но надо позаботиться, чтобы высота блоков (мини-карточек товара) была одинаковой.

Змінено 19 серпня 2017 користувачем jaffagold