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

NEUESTE LÖSUNG (2022)

Lösung 4 mit Bootstrap 4 oder 5

Bootstrap 4 und 5 verwenden standardmäßig Flexbox, daher ist kein zusätzliches CSS erforderlich.

Demo

          einige Inhalte

          Katzen

          noch mehr Inhalte

Lösung 1 mit negativen Rändern (beeinträchtigt die Responsive-Fähigkeit nicht)

Demo

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Lösung 2 mit Tabelle

Demo

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Lösung 3 mit Flex hinzugefügt im August 2015. Kommentare, die vor dieser Zeit veröffentlicht wurden, sind nicht auf diese Lösung anwendbar.

Demo

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

Answer 2

Aktualisierung 2021

Bootstrap 4 + 5

Flexbox wird jetzt standardmäßig in Bootstrap 4 (und Bootstrap 5) verwendet, daher ist kein zusätzliches CSS erforderlich, um gleiche Spaltenhöhen zu erzielen: https://www.codeply.com/go/IJYRI4LPwU

Beispiel:

Bootstrap 3

Bester Ansatz für Bootstrap 3.x — Verwendung von CSS flexbox (und erfordert minimales CSS)...

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

Bootstrap Beispiel für gleiche Höhe mit Flexbox

Um Flexbox nur bei bestimmten Breakpoints anzuwenden (responsiv), verwenden Sie ein Media Query. Hier ist z.B. sm (768px) und höher:

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

Diese Lösung funktioniert auch gut für mehrere Zeilen (Spaltenumbruch): https://www.codeply.com/go/bp/gCEXzPMehZ

Weitere Lösungsansätze

Diese Optionen werden von anderen empfohlen, sind jedoch keine gute Idee für responsives Design. Diese funktionieren nur für einfache Layouts mit einer einzelnen Zeile ohne Spaltenumbruch.

1. Verwendung von großen negativen Margins & Padding

2. Verwendung von display:table-cell (diese Lösung betrifft auch das responsive Grid, daher kann ein @media Query verwendet werden, um table Display nur auf breiteren Bildschirmen anzuwenden, bevor die Spalten vertikal gestapelt werden)

Answer 3

Kein JavaScript erforderlich. Fügen Sie einfach die Klasse .row-eq-height zu Ihrer vorhandenen .row hinzu, genau wie hier:

    etwas Inhalt

    Kätzchen

    noch etwas Inhalt

Tipp: Wenn Sie mehr als 12 Spalten in Ihrer Zeile haben, wird das Bootstrap-Raster nicht in der Lage sein, es umzubrechen. Fügen Sie also für jede 12 Spalten ein neues div.row.row-eq-height hinzu.

Tipp: Möglicherweise müssen Sie Folgendes hinzufügen

zu Ihrem html

Answer 4

Um Ihre Frage zu beantworten, ist dies alles, was Sie brauchen sehen Sie das vollständige responsive Demo mit vorab beigefügtem CSS:

/* Verwendung des col-xs-Media-Query-Breakpoints, aber Sie können 481 zu 768 ändern, um es nur auf col-sm und höher anzuwenden, wenn Sie möchten*/

@media only screen and (min-width: 481px) {
    .flex-row {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    .flex-row.row:after, 
    .flex-row.row:before {
        display: flex;
    }
}

Um die Unterstützung für Thumbnail-Inhalte innerhalb von Flex-Spalten wie im obigen Screenshot hinzuzufügen, fügen Sie auch dies hinzu... Beachten Sie, dass Sie dies auch mit Panels machen können:

.flex-row .thumbnail,
.flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}
.flex-text {
    flex-grow: 1;
}    
.flex-row img {
    width: 100%;
}

---

Obwohl Flexbox in IE9 und darunter nicht funktioniert, können Sie das Demo mit einer Fallback-Lösung unter Verwendung von bedingten Tags mit etwas wie Javascript Grids als Polyfill verwenden:

Was die anderen beiden Beispiele in der akzeptierten Antwort betrifft... Das Tabellen-Demo ist eine gute Idee, aber wird falsch implementiert. Das Anwenden dieses CSS auf Bootstrap-Spaltenklassen wird zweifellos das Rasterframework vollständig zerstören. Sie sollten einen benutzerdefinierten Selektor verwenden und die Tabellenstile sollten nicht auf [class*='col-'] angewendet werden, die definierte Breiten haben. Diese Methode sollte NUR verwendet werden, wenn Sie gleich hohe UND gleich breite Spalten wünschen. Sie ist nicht für andere Layouts gedacht und ist NICHT responsiv. Wir können jedoch eine Fallback-Lösung für mobile Displays erstellen...

    Inhalt...

    Inhalt...

@media only screen and (min-width: 480px){
    .table-row-equal {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-spacing: 30px 0px;
        word-wrap: break-word;
    }
    .table-row-equal .thumbnail {
        float: none;
        display: table-cell;
        vertical-align: top;
        width: 1%;
    }
}

Zuletzt ist das erste Demo in der akzeptierten Antwort, das eine Version des One True Layout implementiert, in manchen Situationen eine gute Wahl, aber nicht für Bootstrap-Spalten geeignet. Der Grund dafür ist, dass alle Spalten auf die Containerhöhe erweitern. Daher wird auch die Responsiveness beeinträchtigt, da die Spalten sich nicht auf die Elemente neben ihnen, sondern auf den gesamten Container ausdehnen. Diese Methode verhindert auch das Hinzufügen von unteren Margen zu Zeilen und verursacht auch andere Probleme wie das Scrollen zu Anker-Tags.

Für den vollständigen Code sehen Sie das Codepen, das den Flexbox-Code automatisch vorab befüllt.

Answer 5

Sie zeigen nur eine Zeile, also könnte Ihr Anwendungsfall darauf beschränkt sein. Für den Fall, dass Sie mehrere Zeilen haben, funktioniert dieses Plugin - github Javascript-grids - perfekt! Es lässt jedes Panel auf die Höhe des höchsten Panels in dieser Zeile erweitern, was jeder Zeile potenziell eine andere Höhe basierend auf dem höchsten Panel in dieser Zeile gibt. Es ist eine jQuery-Lösung im Vergleich zu CSS, aber ich wollte es als alternative Herangehensweise empfehlen.