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

Ответ 1

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

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

.col-wrap{  
    overflow: hidden;   
}

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

Изменить

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

Edit

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

Ответ 2

Попробуйте что-нибудь вроде этого (не очень элегантно):

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

Метод jQuerys height() возвращает максимальное значение, когда выбрано несколько элементов.

См. jsFiddle: http://jsfiddle.net/4HxVT/

Ответ 3

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

Здесь другое решение на основе jQuery:

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

(через этот ответ: fooobar.com/questions/83327/...)

Ответ 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();
});

Ответ 5

$.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();

Ответ 6

Я решил это с помощью настраиваемого плагина jQuery max:

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

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

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

Ответ 7

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

Я объединил CSS с ответом jquery от Как я могу заставить плавающий DIV соответствовать высоте другого плавающего DIV?

После небольшого фригинга я получил это, которое работает с CSS, хотя кнопки не выстраиваются в линию, и отлично с jQuery

Не стесняйтесь исправить бит строки линии 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/

Ответ 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>