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

@media (min-width: @screen-sm-min) {
    div.equal-height-sm {
        display: table;

        > div[class^='col-'] {
            display: table-cell;
            float: none;
            vertical-align: top;
        }
    }
}

    TestTestTest
    Test

Beispiel:

https://jsfiddle.net/b9chris/njcnex83/embedded/result/

Angepasst von mehreren Antworten hier. Die auf Flexbox basierenden Antworten sind der richtige Weg, sobald IE8 und 9 tot sind, und sobald Android 2.x tot ist, aber das ist nicht wahr im Jahr 2015, und wahrscheinlich auch nicht im Jahr 2016. IE8 und 9 machen immer noch 4-6% der Nutzung aus, je nachdem, wie man misst, und für viele Unternehmensbenutzer ist es viel schlimmer. http://caniuse.com/#feat=flexbox

Der Trick mit display: table, display: table-cell ist rückwärtskompatibler - und eine tolle Sache ist, dass das einzige ernsthafte Kompatibilitätsproblem ein Safari-Problem ist, bei dem es box-sizing: border-box erzwingt, etwas, das bereits auf Ihre Bootstrap-Tags angewendet wurde. http://caniuse.com/#feat=css-table

Sie können natürlich weitere Klassen hinzufügen, die Ähnliches tun, wie z.B. .equal-height-md. Ich habe diese an divs gebunden für den kleinen Leistungsvorteil in meiner eingeschränkten Verwendung, aber Sie könnten das Tag entfernen, um es allgemeiner zu gestalten wie den Rest von Bootstrap.

Beachten Sie, dass das jsfiddle hier CSS verwendet, und so sind Dinge hart codiert, die Less sonst liefern würde, wie z.B. @screen-sm-min wurde durch das ersetzt, was Less einfügen würde - 768px.

Answer 2

Wenn es in deinem Kontext Sinn macht, kannst du einfach ein leeres 12-Spalten-Div nach jedem Umbruch hinzufügen, das als Trennzeichen fungiert und sich unten an die höchste Zelle in deiner Reihe schmiegt.

   Einige Inhalte

      Viele Inhalte! Viele Inhalte! Viele Inhalte! Viele Inhalte! Viele Inhalte! 

   Mehr Inhalt...

Hoffe das hilft!

Answer 3

Sie können die Spalten in ein div einwickeln

  etwas Inhalt

  Kätzchen

  noch mehr Inhalt

Answer 4

Versuchen Sie dies über Flexbox zu tun

.container {
    display: flex;
    padding-bottom: 50px;
}
.col {
    background: blue;
    padding: 30px;
}

.col.center {
    background: red;
    height: 100px;
    margin-bottom: -50px;
}

  Links
  Mittig
  Rechts

Live JSFiddle - https://jsfiddle.net/grinmax_/spsn4fnq/

Answer 5

Ich dachte, ich würde hinzufügen, dass die Antwort von Dr. Flink auch auf einen Bootstrap 3 form-horizontal Block angewendet werden kann - was sehr praktisch sein kann, wenn Sie Hintergrundfarben für jede Zelle verwenden möchten. Damit dies für Bootstrap-Formulare funktioniert, müssten Sie den Inhalt des Formulars einpacken, was nur dazu dient, eine tabellenähnliche Struktur zu replizieren.

Das folgende Beispiel zeigt auch den CSS-Code, der eine zusätzliche Media-Query zeigt, mit der Bootstrap 3 einfach übernehmen und auf dem kleineren Bildschirm normal funktionieren kann. Dies funktioniert auch in IE8+.

Beispiel:

      Mein Label

        Etwas Inhalt

.form-wrapper {
  display: table;
}

.form-wrapper .form-group {
  display: table-row;
}

.form-wrapper .form-group .control-label {
  display: table-cell;
  float: none;
}

.form-wrapper .form-group label + div {
  display: table-cell;
  float: none;
}

@media (max-width: 768px) {
  .form-wrapper {
    display: inherit;
  }
  .form-wrapper .form-group {
    display: block;
  }
  .form-wrapper .form-group .control-label {
    display: inherit;
  }
  .form-wrapper .form-group label + div {
    display: inherit;
  }
}