Wie kann ich alle Bootstrap-Spalten auf die gleiche Höhe bringen?

Question

Ich verwende Bootstrap. Wie kann ich drei Spalten alle auf die gleiche Höhe bringen?

Hier ist ein Screenshot des Problems. Ich möchte, dass die blauen und roten Spalten die gleiche Höhe wie die gelbe Spalte haben.

Hier ist der Code:

        some content

        Katzen

        etwas mehr Inhalt

Answer 1

Nur durchsuchen der Bootstrap-Dokumentation und fand die einfache Lösung für das Problem der Spalten gleicher Höhe.

Fügen Sie das zusätzliche Clearfix nur für den erforderlichen Viewport hinzu.

Zum Beispiel:

Dies ist ein langer Text
Das ist kurz
Dies ist ein langer Text
Kurz
Langer Text

Längerer Text, der nach unten drücken wird
Kurz

Bitte beachten Sie http://getbootstrap.com/css/#grid-responsive-resets

Answer 2

Sie können den folgenden Code verwenden

var heights = $(".row > div").map(function() {
    return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".row > div").height(maxHeight);

Answer 3

Viel css hier...

jQuery

$(document).ready(function() {

   // Hole Höhe der Originalspalte, die du anpassen möchtest
   var box-height = $('.panel:nth-child(1)').outerHeight();

   // Gib dieselbe Höhe für ein bestimmtes Element oder Elemente aus
   $('.panel').height(box-height);

});

Wirklich einfacher Code, kein Bedarf, mit css zu spielen, obwohl alle oben genannten Optionen perfekt nutzbar sind.

Jsfiddle