Как в boostrap сделать колонки одной высоты?

Question

[Лариса]

Задача:


-
Верстка:
Код верстки

Вопрос: как сделать что-бы колонки(col-) были одной высоты?

Важно: не используя верстку на флексах

Знаю решение на display: table; но не знаю насколько это красивое решение для Bootstrap и адаптивность inline-block у колонок(col-) отваливается тогда

Comments

[Роман Ямчук]

Тогда только задав вручную height/min-height

Answer 1

[Николай]

используй js или есть готовые методы - equalheights.js к примеру.

Comments

[Лариса]

К большой печали, при адаптиве высота колонок не пересчитывается автоматически

[Николай]

Лариса: был вариант при изменении размера экрана принудительно пересчитывать, поищи вопрос на тостере. Так же можно на контрольой точке отключать скрипт.

Answer 2

[one_day]

$(document).ready(function(){
h1 = $('#block1').height();
h2 = $('#block2').height();
if (h1>h2) {
$('#block2').height(h1);
} else {
$('#block1').height(h2);
};
});

Answer 3

[Виктор Таран]

Маразм крепчал.
Знаю минимум 3 разных способа
и самый идиотский из них это js
1. никикого js
2. никакого кастома ни строчки кода
3. адаптивность.
4. чистый бутстрап
Высота самого высокого дива в линии при текущем разрешение.
Все что вам нужно это в php вставить условие каждый 2 3 или 4 элемент , в зависимости от вашей верстки впихивать соответственный или clearfix или как у меня в примере просто col 12
Да тут приходится добавить чуть-чуть php но это очень легко и можно уже добавлять на выводе. Да и кодом это не назвать. ТАк же поддерживает адаптивность.
И даже гипотетически не может сломаться.
подробней смотри тут ( само собой в коде) смотрете отсечки в каждом 2 3 элеметне.
https://www.mydefile.ru/catalog/

Comments

[one_day]

https://ru.wikipedia.org/wiki/%D0%AD%D1%84%D1%84%D...

Answer 4

[cryolite]

Если известно что боковая колонка всегда будет короче, то можно задать фон для контейнера, а не этой колонки.
Также можно воспользоваться небольшим хаком, задав колонке большой padding-bottom и скомпенсировать отрицательным margin-bottom в контейнере с overflow:hidden.
https://jsfiddle.net/32s4dooo/1/
Минус: сломается анчор, поэтому перестал использовать. (Хотя может с помощью js можно пофиксить)

upd: обновил ссылку

Comments

[Лариса]

блок дата должен оставаться в обеих колонках на одной высоте

[cryolite]

Я сначала подумал что это колонки каркаса.
Если это виджет то мне кажется правильнее не использовать для него грид классы (col-xs-6), а написать свои (с шириной 50% и пр и использовать таблицы\флекс), т.к при адаптации блоки могуть неправильно перестраиваться.
Ну или добавить доп. класс для своих колонок\.row и переопределить. Тогда другие колонки не поломаются, но придется также переопределять поведение для всех медиа.

Answer 5

[Oleg Urievich]

Попробуйте так:
1. Задайте главному контейнеру(обертке этих блоков) display: flex и align-items: stretch
2. Задайте контейнеру с контентом(блоку) display: flex и flex-direction: column
3. элементу с датой поставьте margin-top: auto

Начните изучать bootstrap 4. Там все это реализовано в классах

Comments

[Лариса]

Важно: не используя верстку на флексах

понятно что флексы могучи, но интересовала возможность решения без них(я в вопросе сразу это упоминала, чтобы не путать народ)