san_jorich
@san_jorich
Творческий кодер

Как перераспределить элементы сетки bootstrap 3 в зависимости от их количества?

Как правильно сделать позиционирование элементов сетки от их количества. Если один элемент то .col-xs-12, если 2 то .col-xs-6 если больше то .col-xs-4.
С Bootstrap недавно и запутался..
  • Вопрос задан
  • 171 просмотр
Пригласить эксперта
Ответы на вопрос 4
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
Если не хочешь париться, то используй 4 версию. там по дефолту это есть getbootstrap.com/docs/4.0/layout/grid/#equal-width
Ответ написан
@Zlatan77
На странице всего 12 частей. Если ты ставишь .col-xs-12 то он заполняет всю страницу, если .col-xs-5 и .col-xs-5 то остается еще немного места....
Почитай документацию система разметки...
Ответ написан
san_jorich
@san_jorich Автор вопроса
Творческий кодер
Комрадес, спасибо за подсказки и наводки про 4-ый бут и flex.. смотрите какая история получается

В сетке типа
<div class="container">
    <div class="row">
      <div class="col-sm"></div> <!-- <--Таких блоков может быть неизвестное количество. И один и сто -->
...

Как равномерно распределить их по screen-у, и если их много то выводить максимум по три в ряд, а при маленькой ширине экрана по одному в ряд
p.s. Сформулировать вопрос сложнее чем написать код )..
Ответ написан
Комментировать
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Если без флексов и таблиц, именно так как вы сказали — ширина блоков зависит от их количества, то это в принципе реально.
Выводите все блоки с классами .col-xs-12.my-block (это чтобы по простому унаследовать все стили колонок). Далее загуглите на хабре статью про количественные селекторы. Осмыслите её и напишите тонну селекторов для класса .my-block (для одного блока, для двух, для трёх и т.д., сколько нужно). Задача решена. Работоспособность от IE8 (ну или от IE9 точно) по сравнению с флексами (от IE11).
Но всё же если не нужна такая глубокая поддержка, лучше сделать на флексах. Проще и быстрее.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
05 февр. 2023, в 21:04
500000 руб./за проект
05 февр. 2023, в 20:19
500 руб./за проект
05 февр. 2023, в 19:42
1000000 руб./за проект