Wie stelle ich Kartenspalten horizontal zusammen?

Question

Ich habe eine Smart-Scrolling-Liste der Karten, und während ich das Aussehen card-columns, lieben es ist ziemlich frustrierend, dass es anordnet oben nach unten, etwa so: 1 4 7 2 5 8 3 6 9

Diese vertikale Anordnung scheint für alles im Grunde nutzlos, wo die Inhalt lädt mehr als ein paar Elemente. Wenn ich 50 Gegenstände habe, werden einige der unwichtigsten an der Spitze sein!

Ich habe einige Varianten mit flexbox ausprobiert, konnte aber nichts zum Laufen bringen. Hat jemand eine horizontale Bestellung?

Answer 1

Als documented, die Reihenfolge der CSS Spalten nach unten oben ist, dann von links nach rechts, so dass die Reihenfolge der Spalten gemacht wird ..

1 3 5 
2 4 6 

Es gibt keine Möglichkeit, die Reihenfolge der CSS zu ändern Säulen. Es wird vorgeschlagen, dass Sie eine andere Lösung wie Mauerwerk verwenden. https://github.com/twbs/bootstrap/issues/17882

Answer 2

Gefunden hier eine schöne und einfache Lösung (nicht direkt für Bootstrap) mit CSS http://w3bits.com/flexbox-masonry/

ein Mauerwerk vertikal oder horizontal eingestellt werde ich einen Test geben und Feedback geben, wie man mit Bootstrap verwendet 4.

für horizontale Nutzung:

.masonry { 
    display: flex; 
    flex-flow: row wrap; 
    margin-left: -8px; /* Adjustment for the gutter */ 
} 

.masonry-brick { 
    flex: auto; 
    height: 250px; 
    min-width: 150px; 
    margin: 0 8px 8px 0; /* Some gutter */ 
} 
.masonry-brick { 
    &:nth-child(4n+1){ 
    width: 250px; 
    } 
    &:nth-child(4n+2){ 
    width: 325px; 
    } 
    &:nth-child(4n+3){ 
    width: 180px; 
    } 
    &:nth-child(4n+4){ 
    width: 380px; 
    } 
} 

für vertikale Nutzung:

.masonry { 
    display: flex; 
    flex-flow: column wrap; 
    max-height: 800px; 
    margin-left: -8px; /* Adjustment for the gutter */ 
} 

.masonry-brick { 
    margin: 0 8px 8px 0; /* Some gutter */ 
}