Задать вопрос
loogle18
@loogle18

Как сделать отзывчивый center с помощью bootstrap3?

Привет всем!
Нужна помощь профи. Заранее попрошу не критиковать за вопрос (не могу его решить, уже потерял аппетит и сон).
Суть вопроса:
Есть сайт: mikekus.com/portfolio
Хочу сделать отзывчивый центр, как у него. Чтобы при просмотре на разных экранах количество картинок работ варьировалось от 4 до 2 и при этом место заполнялось (с помошью ширины этих самых картинок) на всю ширину экрана. То есть: если просматривать сайт на PC, то кол-во картинок в ряд шло 4 (на всю ширину, как тут: d1d395199f86418db40d96d8db4a055d.jpg), если на планшете - то кол-во картинок в ряд шло 3 (так же на всю ширину, как тут: 9c70edcfca2b476f9bdb0e551bedffdd.jpg), а если на смартфонах и телефонах - кол-во картинок в ряд шло 2, соответственно, так же на всю ширину экрана того или иного смартфона, как тут: e32005f89fb045da8d79360a90813bd0.jpg.

В сетке бутстрапа только начинаю разбираться.
Знаю, что надо больше читать и практиковаться, но пока не решу вышеописанную проблему, то не смогу нормально жить. Так что помогите пожалуйста. Буду очень благодарен.

Заранее спасибо!
  • Вопрос задан
  • 2384 просмотра
Подписаться 1 Оценить Комментировать
Решения вопроса 1
seoperin
@seoperin
Full stack web developer. Laravel / Vue
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3"></div>

Как то так, например
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
loogle18
@loogle18 Автор вопроса
Вот код центра:
b581465a43a4423aa1f11f1f6ffa891b.jpg
Вот, что происходит, когда экран col-sm (два изображения по идее должны растягиваться на всю ширину экрана, но вместо этого между ними пустое место и по бокам так же пустое место):
60fdee73f1a740d380de5453979c01b3.jpg
А вот еще одно (одни изображения налаживаются на соседние слева и только после этого уходят вниз):
4dff75cc39af4a46b163f73f58078160.jpg

Может что-то для контейрена прописать или для img?
Ответ написан
Ваш ответ на вопрос

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

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