Bootstrap-Reihe mit Säulen unterschiedlicher Höhe

Dies ist eine beliebte Bootstrap Frage, also ich habe aktualisiert und erweitert die Antwort für die Bootstrap-und Bootstrap 3 4...

Den Bootstrap 3 "Höhe problem" tritt auf, weil die Spalten verwenden float:left. Wenn eine Spalte "schwebte" er wird aus dem normalen Fluss des Dokuments. Es ist verschoben nach Links oder rechts, bis es berührt den Rand Ihrer mit box. Wenn du also ungleichmäßige Spalte Höhen, das richtige Verhalten ist, stapeln Sie auf der nächsten Seite.

Hinweis: Die folgenden Optionen gelten für Spalte umbrechen Szenarien, wo es mehr als 12 col-Einheiten in einem einzigen .row. Für Leser, die nicht verstehen, warum es jemals sein mehr als 12 Spalten in einer Zeile, oder denke, die Lösung ist "auf separaten Zeilen" sollte zuerst Lesen

Es gibt ein paar Möglichkeiten, dies zu beheben.. (aktualisiert für das Jahr 2018)

1 - Die "clearfix" - Ansatz ( empfohlen von Bootstrap ), wie dies (erfordert iteration jeder X Spalten). Dies zwingt einen wrap jeder X Anzahl der Spalten...

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Clearfix Demo (single-tier)

Clearfix Demo (responsive Stufen) - zB. col-sm-6 col-md-4 col-lg-3

Gibt es auch eine CSS-only-Variante der 'clearfix'

CSS-only-clearfix mit Tabellen

2 - Stellen die Spalten die gleiche Höhe (mit flexbox):

Da das Problem wird verursacht, durch die Unterschied in der Höhe, können Sie Spalten gleich Höhe durch jede Zeile. Flexbox ist der beste Weg, dies zu tun, und ist nativ unterstützt Bootstrap-4...

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

Flexbox gleicher Höhe Demo

3 - Un-float-Spalten ein inline-block statt..

Wieder, die Höhe problem tritt nur auf, weil die Säulen schwebte. Eine weitere option ist, um die Spalten zu display:inline-block und float:none. Dies bietet auch mehr Flexibilität für die vertikale Ausrichtung. Allerdings ist bei dieser Lösung muss es sein keine HTML-Leerzeichen zwischen den Spalten, da sonst die inline-block-Elemente mit zusätzlichem Speicherplatz und wickeln Sie vorzeitig.

Demo von inline-block-Update

4 - CSS3-Säulen-Ansatz (Mauerwerk/Pinterest wie Lösung)..

Dies ist nicht native zu Bootstrap 3, aber ein anderer Ansatz mit CSS multi-columns. Ein Nachteil dieses Ansatzes ist die Reihenfolge der Spalten von oben nach unten statt von Links nach rechts. Bootstrap-4 enthält diese Art von
Lösung:
Bootstrap 4 Mauerwerk Karten Demo.

Bootstrap 3 multi-Spalten-Demo

5 - Mauerwerk JavaScript/jQuery-Ansatz

Schließlich, möchten Sie möglicherweise verwenden Sie eine plugin wie Isotope/Mauerwerk:

Bootstrap-Mauerwerk Demo

Mauerwerk Demo 2

Mehr über Bootstrap-Variable Höhe Spalten

Update 2018

Alle Spalten sind gleich hoch in Bootstrap-4, weil es verwendet flexbox standardmäßig, also die "Höhe " Problem" ist kein problem. Darüber hinaus Bootstrap-4 enthält diese Art von multi-Spalten-Lösung:
Bootstrap 4 Mauerwerk Karten Demo.

InformationsquelleAutor Zim

Erstellte ich eine weitere Erweiterung (die auch aktiv) zu der bootstrap-Reihe. Sie können versuchen, so etwas wie dieses:

.row.flexRow { display: flex; flex-wrap: wrap;}

InformationsquelleAutor Akash Yellappa