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

Question

[Александр Соболев]

Как правильно сделать позиционирование элементов сетки от их количества. Если один элемент то .col-xs-12, если 2 то .col-xs-6 если больше то .col-xs-4.
С Bootstrap недавно и запутался..

Comments

[Ярослав Иванов]

display: table

Answer 1

[iBird Rose]

Если не хочешь париться, то используй 4 версию. там по дефолту это есть getbootstrap.com/docs/4.0/layout/grid/#equal-width

Comments

[Ярослав Иванов]

О, они заново открыли таблицы)

Answer 2

[adrash kh]

На странице всего 12 частей. Если ты ставишь .col-xs-12 то он заполняет всю страницу, если .col-xs-5 и .col-xs-5 то остается еще немного места....
Почитай документацию система разметки...

Comments

[Сергей]

вопрос не в этом был.

Answer 3

[Александр Соболев]

Комрадес, спасибо за подсказки и наводки про 4-ый бут и flex.. смотрите какая история получается

В сетке типа

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

Как равномерно распределить их по screen-у, и если их много то выводить максимум по три в ряд, а при маленькой ширине экрана по одному в ряд
p.s. Сформулировать вопрос сложнее чем написать код )..

Answer 4

[Сергей delphinpro]

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