Twitter bootstrap kullanma 2.0 - Eşit sütun yüksekliği nasıl yapılır?

Question

Bootstrap 2.0, .span1, .span2 .... .span12 eşit yükseklikte yapmak için yardımcılara sahiptir. Bu tür bir html'yi iç içe girdim, mümkünse her birinin aynı yüksekliğe çıkmasını isterim? (Çok şık değil, ama) böyle

Answer 1

İşte büyük dolgu ve eşit derecede büyük negatif ekleyerek dayalı bir duyarlı CSS çözüm Her sütuna marj yapın, ardından tüm satırı gizli bir taşma ile bir sınıfa sarın. http://jsfiddle.net/panchroma/4Pyhj/

: Eğer eşit yükseklik kuyu veya köşeleri yuvarlatılmış eşit yükseklik sütunları gerekiyorsa

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

.col-wrap{ 
    overflow: hidden; 
} 

Bunu bir soruya yanıt olarak düzenleyin

jsFiddle

çalışan görebilirsiniz burada varyasyonu olan

Edit

Answer 2

deneyin şey: Birden elemanları seçildiğinde

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

jQuerys height() yöntem en yüksek değeri döndürür. http://jsfiddle.net/4HxVT/

Answer 3

jQuery'nin yüksekliği() yöntemi "ile eşleşen öğeleri kümesinin ilk eleman" değerini verir:

jsFiddle bakınız. http://jsfiddle.net/4HxVT/'daki yanıt, yalnızca satırdaki ilk öğe de en yüksek olduğu için çalışır.

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

(bu cevap Via: https://stackoverflow.com/a/526316/518535)

Burada başka jQuery tabanlı çözüm

Answer 4

zaten verilen cevaplar üzerine Genişleyen, sadece bu jquery ve underscore kullanarak çözdük. Aşağıdaki snippet uzun bir göründüğü yerleri ne olursa olsun, belirli bir satırda görünmesi benim kuyuları ve uyarıların yüksekliğini eşitleyen:

$('.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

Özel bir jQuery max eklentisi ile bu çözülebilir:

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

bir soruya yanıt olarak

, burada sadece Bootstap ızgara sınıf adını güncellemek, Bootstrap 3, aynı prensipte aynı tekniktir

$('.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

:

Burada içerik kutu zaman iç sütun elemanı, içerik konteyner sütun içerir sarıcı olupYukarıdaki tüm çözümler, güzel önyükleme butonları ekleyene kadar çalışır! Düğmeleri nasıl konumlandırırsın diye düşündüm (evet, benim problemim buydu).

Ben düğmeleri hizaya olmadığı halde CSS ile çalışır bu var frigging biraz, sonra How might I force a floating DIV to match the height of another floating DIV?

Jquery cevap CSS kombine ve jQuery

hissedin ile gayet

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

: bit :)

jQuery CSS düğme hattı düzeltmek için ücretsiz

.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/ İşte

Answer 8

2 sütun (sadece fazla koşul eklemek basittir fazla sütunlara bu uyum) ile benim çözümdür. Tüm öğelerin doğru yüksekliğine sahip olması için yükleme olayında çalıştırın.

$(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>