Использование twitter bootstrap 2.0 - Как сделать равные высоты столбцов?

Question

Есть ли в bootstrap 2.0 какие-либо помощники, чтобы сделать .span1, .span2 .... .span12 равной высотой. Я вложил этот тип html

<div class='container'> 
    <div class='row'> 
    <div class='span2'> 
     <div class='well'> 
     XXXX 
     </div> 
    </div> 
    <div class='span2'> 
     <div class='well'> 
     XXXX 
     XXXX 
     </div> 
    </div> 
    <div class='span2'> 
     <div class='well'> 
     XXXX 
     XXXX 
     XXXX 
     </div> 
    </div> 
    </div> 
</div> 

Я хотел бы, чтобы каждая скважина была в конечном итоге одинаковой высоты, если это возможно?

Answer 1

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

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

.col-wrap{ 
    overflow: hidden; 
} 

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

Редактировать

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

Редакция

В ответ на вопрос, вот та же техника в Bootstrap 3, такому же принципу, просто обновить имена классов в сетке Bootstap: http://jsfiddle.net/panchroma/bj4ys/embedded/result/

Answer 2

попробовать что-то вроде этого (не очень элегантно, хотя):

$('.well').css({ 
    'height': $('.well').height() 
}); 

В jQuerys height() метод возвращает наибольшее значение при выборе нескольких элементов.

Смотрите jsFiddle: http://jsfiddle.net/4HxVT/

Answer 3

метод Jquery по высоте() возвращает значение «первого элемента в наборе соответствующих элементов». Ответ в http://jsfiddle.net/4HxVT/ работает только потому, что первый элемент в строке также является самым высоким.

Вот другой на основе JQuery решение:

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

(Через этот ответ: https://stackoverflow.com/a/526316/518535)

Answer 4

Расширение на ответы уже заданных, я просто решил эту проблему с помощью jquery и underscore. Фрагмент кода ниже уравнивает высоту моих скважин и предупреждения, которые появляются на данной строке, независимо от того, где появляется самая высокая один:

$('.well, .alert').height(function() { 
    var h = _.max($(this).closest('.row').find('.well, .alert'), function (elem, index, list) { 
     return $(elem).height(); 
    }); 
    return $(h).height(); 
}); 

Answer 5

Я решил эту проблему с помощью пользовательского JQuery макс плагин:

$.fn.max = function(selector) { 
    return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get()); 
} 

Здесь контент-бокс мой внутренний элемент столбца содержимого контейнера является оболочкой, которая содержит столбцы:

$('.content-box').height(function() { 
    var maxHeight = $(this).closest('.content-container').find('.content-box') 
        .max(function() { 
        return $(this).height(); 
        }); 
    return maxHeight; 
}) 

Answer 6

$.fn.matchHeight = function() { 
    var max = 0; 

    $(this).each(function(i, e) { 
    var height = $(e).height(); 
    max = height > max ? height : max; 
    }); 

    $(this).height(max); 
}; 

$('.match-height').matchHeight(); 

Answer 7

Вышеупомянутые решения работают до тех пор, пока вы не добавите красивые кнопки бутстрапа! Как вы позиционируете кнопки, которые я думал (да, это была моя проблема).

Я объединил CSS с JQuery ответа от How might I force a floating DIV to match the height of another floating DIV?

После немного поганый я получил это, который работает с CSS, хотя кнопки не выстраиваются в очередь, и прекрасно с JQuery

Feel бесплатно зафиксировать кнопку CSS линию вверх немного :)

JQuery:

$.fn.equalHeights = function (px) { 
    $(this).each(function() { 
     var currentTallest = 0; 
     $(this).children().each(function (i) { 
      if ($(this).height() > currentTallest) { 
       currentTallest = $(this).height(); 
      } 
     }); 
     if (!px && Number.prototype.pxToEm) { 
      currentTallest = currentTallest.pxToEm(); //use ems unless px is specified 
     } 
     // for ie6, set height since min-height isn't supported 
     if ($.browser.msie && $.browser.version == 6.0) { 
      $(this).children().css({ 
       'height': currentTallest 
      }); 
     } 
     $(this).children().css({ 
      'min-height': currentTallest + 40 // THIS IS A FRIG - works for jquery but doesn't help CSS only 
     }); 
    }); 
    return this; 
}; 

$(document).ready(function() { 
    var btnstyle = { 
    position : 'absolute', 
    bottom : '5px', 
    left : '10px' 
    }; 
    $('.btn').css(btnstyle); 
    var colstyle = { 
    marginBottom : '0px', 
    paddingBottom : '0px', 
    backgroundColor : '#fbf' 
    }; 
    $('.col').css(colstyle);  
    $('.row-fluid').equalHeights(); 
}); 

CSS

.col { 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
    background-color:#ffb; 
    position:relative; 
} 
.col-wrap { 
    overflow: hidden; 
} 

.btn{ 
    margin-left:10px ; 
} 
p:last-child { 
margin-bottom:20px ; 
} 

jsfiddle - http://jsfiddle.net/brianlmerritt/k8Bkm/

Answer 8

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

$(window).on('load', function() { 
    var left = $('.left'); 
    var leftHeight = left.height(); 
    var right = $('.right'); 
    var rightHeight = right.height(); 

    // Width like mobile, the height calculation is not needed 
    if ($(window).width() <= 751) 
    { 
     if (leftHeight > rightHeight) { 
      right.css({ 
       'height': 'auto' 
      }); 
     } 
     else { 
      left.css({ 
       'height': 'auto' 
      }); 
     } 

     return; 
    } 

    if (leftHeight > rightHeight) { 
     right.css({ 
      'height': leftHeight 
     }); 
    } 
    else { 
     left.css({ 
      'height': rightHeight 
     }); 
    } 
}); 

<div class="row"> 
    <div class="span4 left"></div> 
    <div class="span8 right"></div> 
</div>