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

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
 }

Von:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

Answer 2

Wenn jemand Bootstrap 4 verwendet und nach gleich hohen Spalten sucht, sollte er einfach row-eq-height zum übergeordneten Div hinzufügen

  .row.row-eq-height > .col-xs-4
  .row.row-eq-height > .col-xs-4dies isteinevielhöhereSpalteals die anderen
  .row.row-eq-height > .col-xs-4

Ref: http://getbootstrap.com.vn/examples/equal-height-columns/

Answer 3

Freche jQuery-Lösung, wenn jemand interessiert ist. Stellen Sie einfach sicher, dass alle Ihre Spalten (el) einen gemeinsamen Klassennamen haben... funktioniert auch responsiv, wenn Sie es an $(window).resize binden

function equal_cols(el)
{
    var h = 0;
    $(el).each(function(){
        $(this).css({'height':'auto'});
        if($(this).outerHeight() > h)
        {
            h = $(this).outerHeight();
        }
    });
    $(el).each(function(){
        $(this).css({'height':h});
    });
}

Verwendung

$(document).ready(function(){
   equal_cols('.selector');
});

---

Hinweis: Dieser Beitrag wurde gemäß dem Kommentar von @Chris bearbeitet, dass der Code nur die letzte höchste Höhe im $.each()-Funktion setzte

Answer 4

Einige der vorherigen Antworten erläutern, wie man die divs auf die gleiche Höhe bringen kann, aber das Problem besteht darin, dass die divs sich nicht stapeln, wenn die Breite zu schmal ist, daher können Sie ihre Antworten mit einem zusätzlichen Teil umsetzen. Für jeden können Sie den hier angegebenen CSS-Namen zusätzlich zur Zeilenklasse verwenden, damit das div so aussieht, wenn Sie möchten, dass die divs immer nebeneinander stehen:

Ihr Inhalt hier

Für alle Bildschirme:

.row-eq-height-xs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: row;
}

Für den Einsatz bei sm:

.row-eq-height-sm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:768px) {
    .row-eq-height-sm {
        flex-direction: row;
    }
}

Für den Einsatz bei md:

.row-eq-height-md {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:992px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

Für den Einsatz bei lg:

.row-eq-height-lg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:1200px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

BEARBEITEN Basierend auf einem Kommentar gibt es tatsächlich eine einfachere Lösung, aber Sie müssen sicherstellen, dass Sie für alle Größen von der größten gewünschten Breite bis zu xs (z. B.

die Spalteninformationen angeben:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

Answer 5

Ja, Bootstrap 4 sorgt dafür, dass alle Spalten in einer Reihe die gleiche Höhe haben, aber wenn Sie einen Rahmen um den Inhalt innerhalb der Reihe erstellen, könnte es so aussehen, als ob die Spalten nicht die gleiche Höhe haben!

Als ich height: 100% auf das Element innerhalb der Spalte angewendet habe, habe ich gemerkt, dass ich meinen Abstand verloren habe.

Meine Lösung besteht darin, Polsterung auf das div der Spalte anzuwenden (anstelle eines Abstands auf dem inneren Element). Wie folgt:

                        ...

                        ...

                        ...

                        ...

                        ...

                        ...

                        ...

                        ...

                        ...

Das obige Codebeispiel verwendet Bootstrap 4.1, um eine Reihe von neun Feldern mit einem Rahmen zu erstellen