wake-up-neo.com

Bootstrap-Reihe mit unterschiedlichen Säulen

Ich habe momentan so etwas wie:

<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="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Nun angenommen, dass content Boxen mit unterschiedlicher Höhe und gleicher Breite waren - wie könnte ich das gleiche "gitterbasierte Layout" beibehalten und trotzdem alle Boxen unter einer Linie anordnen, anstatt in perfekten Linien.

Derzeit wird TWBS die nächste Zeile von col-md-4 unter dem längsten Element in der vorherigen dritten Zeile platzieren. Daher ist jede Zeile der Elemente perfekt auf einen sauberen Bereich ausgerichtet - während dies fantastisch ist. Ich möchte, dass jedes Element direkt unter das letzte Element fällt ("Masonry"). Layout)

htmlcsstwitter-bootstrapresponsive-designbootstrap-4
54
user3379926

Aus irgendeinem Grund funktionierte das für mich ohne die .display-flex-Klasse

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

Ich habe eine andere Erweiterung (die auch reaktiv ist) für die Bootstrap-Zeile erstellt. Sie können so etwas versuchen:

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

0
Akash Yellappa

Die Summe der Cols innerhalb des Twitter-Bootstraps sollte immer 12 sein. Dadurch bleibt das Raster-Design sauber:

 <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>
 <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>
<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>
0
Christian Michael