Как в бутстрапе сделать так....?

Question

[a16a]

Всем привет.
Как сделать так чтобы блоки смешались вниз если не помещались вдоль сайта.
Есть 4 блока:
один занимает 4 колоны, второй 2, третьи 4, четвертый 2 колоны.
Я задал такие классы. Ну в этом то и проблема походу)

col-lg-4 col-md-4 col-sm-4 col-xs-4
col-lg-2 col-md-2 col-sm-2 col-xs-2

Когда сжимаю сайт, тексты тоже сжимается и становится нечитабельным.
Я хочу чтобы материнский блок расширилась вниз по не помещение внутренних блоков.

Answer 1

[Евгений Вольф]

В страпе 12 колонок, по умолчанию. Если Вы подряд например, сделаете 3 блока на 6 колонок, то 3-й, не помещаясь в 12 колонок - "упадет" вниз. Кол-во колонок, которые будет занимать блок - Вы можете задать на каждое из доступных (их около 4, в зависимости от того, как считать) разрешение.

Я думаю, у Вас проблема в том, что на разрешении col-xs-2 - у Вас 2 колонки стоит, т.е. и если верить этой странице, это означает, что на разрешении <768px, у Вас блок будет занимать 2 колонки, т.е. не более чем (768 / 12 * 2) = 128px. Выставите col-xs-6 или col-xs-12 (или любое другое число, на Ваше усмотрение), вместо 2, тогда и блок будет занимать соотв. ширину.

Answer 2

[Иван]

По дефолту в Row (строке) 12 колонок (не суть каких). По сему если суммарно блок выходит за ширину, то его перебросит на другую строку.
Например

col-lg-4 col-md-4 col-sm-4 col-xs-4
col-lg-4 col-md-4 col-sm-4 col-xs-4
col-lg-4 col-md-4 col-sm-4 col-xs-4
col-lg-4 col-md-4 col-sm-4 col-xs-4

4-ый блок будет на новой строке.
А так

col-lg-4 col-md-4 col-sm-4 col-xs-12
col-lg-4 col-md-4 col-sm-4 col-xs-12
col-lg-4 col-md-4 col-sm-4 col-xs-12

Условно на ПК будет 1 строка, а на мобильном 3.

Comments

[a16a]

А как теперь их сделать так чтобы элементы были по центру по вертикали.

[Егор Живагин]

a16a: ставить бустрап 4(по-возможности) и учить display: flex
Иначе вам придётся извращаться с позиционированиями

[a16a]

Krasnodar_etc: b4 отличается классами от b3 даже и в bootstrap 4 между альфа версиями, что неудобно. а на офф сайта мало информации о новых классах.

[Иван]

Krasnodar_etc: слишком сырой еще, а у флекса бывают проблемы со старыми браузерами (похрен) и мобильными (не похрен).