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

Wenn du möchtest, dass dies in jedem Browser funktioniert, verwende JavaScript:

$( document ).ready(function() {
    var heights = $(".panel").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".panel").height(maxHeight);
});

Answer 2

Ich habe viele der Vorschläge aus diesem Thread und von anderen Seiten ausprobiert, aber keine Lösung hat zu 100% in allen Browsern funktioniert.

Also habe ich eine Weile experimentiert und bin zu diesem Ergebnis gekommen. Eine vollständige Lösung für gleichhohe Bootstrap-Spalten mit Hilfe von Flexbox mit nur einer Klasse. Dies funktioniert in allen gängigen Browsern ab IE10.

CSS:

.row.equal-cols {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row.equal-cols:before,
.row.equal-cols:after {
  display: block;
}

.row.equal-cols > [class*='col-'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.row.equal-cols > [class*='col-'] > * {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; 
}

HTML:

Um noch mehr Versionen von IE zu unterstützen, können Sie zum Beispiel https://github.com/liabru/jquery-match-height verwenden und alle Kindspalten von .equal-cols ansprechen. So:

// Erstellen Sie eine Überprüfung für IE9 (oder einen anderen spezifischen Browser).
if(IE9) {
  $(".row.equal-cols > [class*='col-']").matchHeight();
}

Ohne dieses Polyfill verhalten sich die Spalten wie übliche Bootstrap-Spalten, was ein ziemlich guter Ausweichplan ist.

Answer 3

From official documentation. Maybe you can use it in your case.

Wenn Sie eine gleichmäßige Höhe benötigen, fügen Sie .h-100 den Karten hinzu.

Answer 4

Ich bin überrascht, dass ich Ende 2018 hier keine brauchbare Lösung gefunden habe. Ich habe schließlich selbst eine Bootstrap 3-Lösung mithilfe von Flexbox herausgefunden.

Sauberes und einfaches Beispiel:

HTML

        Text

        Text

CSS

img {
  width: 100%;
}
p {
  padding: 2em;
}
@media (min-width: 768px) {
  .row-equal {
    display: flex;
    flex-wrap: wrap;
  }
  .col-equal {
    margin: auto;
  }
}

Arbeitsdemo anzeigen: http://jsfiddle.net/5kmtfrny/

Answer 5

Sie können auch inline-flex verwenden, was ziemlich gut funktioniert und möglicherweise etwas sauberer ist als die Modifikation jedes Zeilenelements mit CSS.

Für mein Projekt wollte ich, dass jede Zeile, deren Unterelemente Rahmen hatten, die gleiche Höhe hatte, damit die Rahmen zackig aussahen. Dafür habe ich eine einfache CSS-Klasse erstellt.

.row.borders{
    display: inline-flex;
    width: 100%;
}