SkyShot
@SkyShot
Фрилансер, интроверт, дизайнер, web-разработчик.

Как сделать автоматическое выравнивание блоков bootstrap по центру?

Люди добрые, к Вам я обратиться за помощью хочу. Ибо я не знаю как решить проблему насущную.
Распишите пожалуйста, что мне надо сделать, Дабы блоки выравнивались по центру автоматически, независимо 1 или 2 остается из 3.
Вот скрины
Скрин первый
kskbvX3LRfib4etKDYSc9g.png
Скрин второй
c6rtesZLTBmrmt1GT9tXTA.png
  • Вопрос задан
  • 377 просмотров
Решения вопроса 2
Matsunaki
@Matsunaki
Любознательный пользователь :)
margin: 0 auto
для блоков с товарами
Ответ написан
lazalu68
@lazalu68
Salmon
display: inline-block и text-align: center не подойдёт?
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@JuniorNoobie
Сижу в поддержке, пишу мелкие проекты
Стройте последнюю строку контента отдельно. Предположим, что N - это количество элементов на странице.
1) Если N % 3 == 0, то строим как обычно;
2) Если N % 3 == 1, то строим все, кроме последнего элемента. Затем у последней строки строим так: пропуск-4-столбцов, наш элемент, пропуск-4-столбцов;
3) Если N % 2 == 2, то строим последнюю строку так: пропуск-2-столбцов, наш элемент, наш элемент, пропуск-2-столбцов.

И это без учета пагинации.
Ответ написан
@ned4ded
Верстка, Фронтенд
В общем, бутстрап 3 имеет свои неприятные особенности, выравнивание колонок - одна из них. Он написан на флоатах (в отличии от 4 версии) и единственное, что может помочь - это, пожалуй, динамиечское присвоение классов через js или на бэке. Это неприятный костыль, но флоатам нельзя просто так взять и напсиать: эй ты держись в середке.

В чем суть: вам нужен js который при загрузке страницы будет считать количество загруженных элементов в каталоге. Если число кратно 3 - все огонь. Если остатаются 2 элемента, то предпоследнему элементу присваивается класс col-*-offset-2, если остается 1 элемент, то последнему элементу - col-*-offset-4. Офсеты добавляют margin слева любой колонке, имитируя нахождение n-го количества колонок слева от него.
Вместо звездочки * - брейкпоинт (зависит от вашей сетки). По семантике работают как обычные колонки.

Второй вариант: делать не через оффсеты, а через изменение класса колонки.
Т.е. в случае двух элементов - col-*-6, в случае 1 - col-*-12
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы