Как правильно сверстать одинаковые блоки в bootstrap?

Question

[Klaus Kater]

Здравствуйте. Вполне стандартная проблема, но решение я так и не нашел.
Есть неопределенное количество блоков, которые показываются в сетке. Для показа используется бутстрап, из соображений адаптивности. (Есть требование, на больших экранах 3 колонки, на поменьше 2, на мобильниках 1) К сожалению бутсрап выстроил высоту колонок как ему вздумалось, а нужно чтобы колонки в одном ряду, были одного размера.

<div class="container row">
      <div class="col-xs-12 col-sm-6 col-md-4">блабла</div>
      <div class="col-xs-12 col-sm-6 col-md-4">блабла</div>
      <div class="col-xs-12 col-sm-6 col-md-4">блабла</div>
      <div class="col-xs-12 col-sm-6 col-md-4">блабла</div>
      <div class="col-xs-12 col-sm-6 col-md-4">блабла</div>
</div>

Есть решение вставлять спец див, в места где кончаются строки (<div class=clearfix></div>) но проблема в том, что строки на разных устройствах кончаются по разному.
Остается только расчет высоты через javascript, но это в данном случае не очень правильно.
Есть способ выровнять колонки через css? Я не особо знаком с бутстрапом, может что то упустил.

Answer 1

[Pretor DH]

Простое решение:
Ограничить высоту колонок через max-height: XXXpx;.
И поставить text-overflow: ellipsis;.
При клике или :hover открывать весь блок.

или По сложнее:
Сверстать три колонки и пропорционально распихать блоки по ним. Но этот вариант подойтет только для фиксированой верстки. Flex-box

или Сложное но простое:
Использовать masonry.js.

P.S. Класс clearfix используется совсем для других целей.

Comments

[Klaus Kater]

Проблема первого варианта - тотальное нарушение дизайна.

Второе - фиксированная верстка - не труъ )) и здесь к сожалению не подходит.

Третье как раз js-ный вариант, который я могу сделать и без библиотек. Пока я так и сделал, но все таки хотелось бы найти способ без js-а.

[Pretor DH]

Klaus Kater: Из простого остается только flex-box.
Но тогда или колонки или строки будут одинаковой высоты.

Answer 2

[Михаил Чирский]

Уже почти 2016, а вы все используете старые подходы, давно пора использовать Flexbox, он уже поддерживается достаточно хорошо, и во всех современных браузерах он работает, и не какой головной боли

Comments

[Андрей Хохлов]

Это не мы плохие, это заказчик только-только начал соглашаться на ie9+.