2012-05-27 5 views
16

Возможно ли, чтобы две скважины с колоколообразными колоннами с неравномерной длиной столбцов были одинаковой высоты?Twitter Bootstrap - одинаковые высоты на флюидных колоннах

+0

извините! поиск пришел сразу после того, как я опубликовал – ina

+0

На самом деле, другой пост - это фиксированный макет, и решение, похоже, не работает для флюидных столбцов. – ina

ответ

26

Вот отзывчивое решение для CSS, основанное на добавлении большого отступов и одинаково большого отрицательного поля для каждого столбца, а затем завершение всей строки в классе с скрытым переполнением.

.col{ 
margin-bottom: -99999px; 
padding-bottom: 99999px; 
background-color:#ffc; 
} 

.col-wrap{ 
overflow: hidden; 
} 

Вы можете видеть, что это работает на jsFiddle

EDIT

Разновидность если вы хотите равные по высоте скважины или колонны с закругленными углами:
http://jsfiddle.net/panchroma/4Pyhj/

EDIT

другой вариация с равными по высоте скважинами или колоннами с роумом DED углы, на этот раз для Bootstrap 3
http://jsfiddle.net/panchroma/D4xdE/

Это более или менее такой же, как и с Bootstap 2, но с некоторыми уточнениями, чтобы приспособить изменения в том, как BS пространства сетки колонн в настоящее время.

+1

Потому что это просто делает столбцы действительно большими и скрывает «действительно большой» бит, работайте, когда столбцы имеют закругленные границы, так как нижняя часть каждого столбца скрыта. –

+0

Как насчет того же эффекта с Bootstrap 3? – Dmitry

+2

@Dmitry, см. Мой обновленный ответ –

Смежные вопросы