Utilizzo di twitter bootstrap 2.0 - Come aumentare l'altezza delle colonne?

Question

Bootstrap 2.0 ha qualche aiuto per rendere .span1, .span2 .... .span12 uguale altezza. Ho annidato questo tipo di codice 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> 

Vorrei che ogni pozzetto finisse alla stessa altezza se possibile?

Answer 1

Ecco una soluzione CSS reattivo, basato sull'aggiunta di un grande imbottitura e un altrettanto ampio negativo margine per ogni colonna, quindi avvolgendo l'intera riga in una classe con overflow nascosto.

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

.col-wrap{ 
    overflow: hidden; 
} 

si può vedere lavorare a jsFiddle

Modifica

In risposta a una domanda, ecco una variazione se avete bisogno di pozzi altezza pari o colonne di altezza pari con gli angoli arrotondati: http://jsfiddle.net/panchroma/4Pyhj/

Modifica

In risposta a una domanda, ecco la stessa tecnica in Bootstrap 3, lo stesso principio, basta aggiornare i nomi delle classi nella griglia Bootstap: http://jsfiddle.net/panchroma/bj4ys/embedded/result/

Answer 2

provare qualcosa di simile (non molto elegante, però):

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

I jQuerys height() metodo restituisce il valore più alto quando si selezionano più elementi.

Vedere il jsFiddle: http://jsfiddle.net/4HxVT/

Answer 3

il metodo di jQuery altezza() restituisce il valore del "primo elemento nel set di elementi abbinati". La risposta in http://jsfiddle.net/4HxVT/ funziona solo perché il primo elemento della riga è anche il più alto.

Ecco un'altra soluzione basata jQuery:

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

(Via questa risposta: https://stackoverflow.com/a/526316/518535)

Answer 4

espansione a seconda delle risposte già date, ho appena risolto questo utilizzando jquery e underscore. Il frammento di seguito equalizza l'altezza dei miei pozzi e gli avvisi che appaiono su una determinata riga, indipendentemente da dove appare quello più alto:

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

ho risolto questo con un costume jQuery max plugin:

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

Qui contenuti-box è il mio elemento di colonna interna, il contenuto-contenitore è l'involucro che contiene le colonne:

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

Le soluzioni di cui sopra funzionano tutte finché non si aggiungono dei bei pulsanti di bootstrap! Come posizioni i pulsanti pensavo (sì, quello era il mio problema).

ho unito il CSS con la risposta jquery da How might I force a floating DIV to match the height of another floating DIV?

Dopo un po 'di frigging ho ottenuto questo, che lavora con i CSS, anche se i tasti non si allineano, e va bene con jQuery

tatto liberi di fissare la linea pulsante CSS fino po ':)

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

0.123.516,41 mila

.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

Ecco la mia soluzione con 2 colonne (ADAPT questo a più colonne è semplice, basta aggiungere altre condizioni). Esegui sull'evento load per avere le altezze corrette di tutti gli elementi.

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