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

Es gibt ein Problem beim Verwenden von Lösung 1, wenn sie nur auf eine Spalte in Zeilen angewendet wird. Möchte Lösung 1 verbessern.

 [class^="col-"]:not([class*="-12"]){
      margin-bottom: -99999px;
      padding-bottom: 99999px;
  }

(Entschuldigung, kann die Antwort von Popnoodles nicht kommentieren. Ich habe nicht genug Reputation)

Answer 2

Ich verwende diese super einfache Lösung mit clearfix, die keine Nebenwirkungen hat.

Hier ist ein Beispiel für AngularJS:

Und noch ein Beispiel für PHP:

 $item): ?>

Answer 3

Hier ist meine Methode, ich habe flex mit einigen Änderungen in den Media Queries verwendet.

@media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

dann habe ich die Klassen zum Elternelement hinzugefügt, die erforderlich waren.

Spalte 1
Spalte 2
Spalte 3

Ich verwende responsive Breakpoints, weil Flexibilität in der Regel die standardmäßige reaktionsfähige Natur von Bootstrap beeinträchtigt.

Answer 4

Ich habe nach einer Lösung für dasselbe Problem gesucht und eine gefunden, die einfach funktioniert hat !! - fast ohne zusätzlichen Code.

Siehe https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 für eine gute Diskussion und die gewünschte Antwort am Ende mit einem Link.

https://www.codeply.com/go/EskIjvun4B

Dies war der richtige responsive Weg für mich... Ein Zitat: ... 3—Verwenden Sie Flexbox (am besten!)

Ab 2017 ist der beste (und einfachste) Weg, um gleichhohe Spalten in einem responsiven Design zu erstellen, die Verwendung von CSS3 Flexbox.

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

und verwenden Sie einfach:

div class="container">

Answer 5

HTML

            linke Spalte 
            Die erste Spalte muss am längsten sein Die erste Spalte muss am längsten sein 

            mittlere Spalte

            rechte Spalte 
            rechte Spalte 
            rechte Spalte 
            rechte Spalte 
            rechte Spalte 

CSS

.option2 { Hintergrund: rot; Rand: schwarz 1px solide; Farbe: weiß; }

JS

$('.option2').css({
    'Höhe': $('.option2').height()
});