2016-02-26 2 views
0

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

one row, 3 columns

я тестировал следующий, но он не работает

<div class="row" id="top-row">.... 

$('#top-row').on('resize', function() { /*col-2,3 height = col-1 height*/ }); 

Но функция не работает.

+2

'на ('размер')' событие работает на 'window' объект только. –

+2

Что вы думаете о решении этой проблемы только с помощью CSS? 'display: table-cell' может сделать это отлично. –

+0

вы можете добавить минимальную высоту –

ответ

2
html 
<div class="row"> 
    <div class="col-xs-4"> 
     block 1 
    </div>   
    <div class="col-xs-4"> 
     block 2    
    </div>  
    <div class="col-xs-4"> 
      block 3 
    </div> 
</div> 

JS

$(function() { 
    var $paragraphs = $('#top-row .col-xs-4'), 
    heights = []; 
    $paragraphs.each(function() { 
     heights.push($(this).height()); 
    }); 
    var maxHeight = Math.max.apply(this, heights); 
    $paragraphs.height(maxHeight); 
}); 

это займет высоту самого длинного блока и будет применяться ко всем

+0

Спасибо за пример, он отлично работает :-) – Phil795

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