Использование Twitter начальной загрузки 2.0 - Как сделать равные высоты столбцов?

Есть ли у начальной загрузки 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>

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

Источник

8 ответов

Решение

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

.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/

Источник

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

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

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

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

Источник

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

Вот еще одно решение на основе jQuery:

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

(С помощью этого ответа: /questions/30094763/kak-ya-mogu-zastavit-plavayuschij-div-sootvetstvovat-vyisote-drugogo-plavayuschego-div/30094778#30094778)

Источник

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

$('.well, .alert').height(function () {
    var h = _.max($(this).closest('.row').find('.well, .alert'), function (elem, index, list) {
        return $(elem).height();
    });
    return $(h).height();
});
Источник 
$.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();
Источник

Я решил это с помощью пользовательского плагина 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;
})
Источник

Вот мое решение с 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>
Источник

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

Я объединил 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/

Источник
Другие вопросы по тегам