Bootstrap Artikel Reihenfolge in mehrspaltigen Artikel Gruppe

Question

Ich versuche, die Reihenfolge der Schaltflächen in einer Bootstrap-Liste-Gruppe zu ändern. Ich habe derzeit das folgende Layout (Zeile zuerst).

Ich versuche, eine Spalte erstes Layout zu erreichen, wie so.

ich zur Zeit wieder die Sortierung der Liste, damit dies geschieht, aber ich frage mich, ob es eine elegantere Methode ist, das Problem zu lösen.

https://www.bootply.com/pFSlgefurQ

Answer 1

Ich weiß nicht, ob es viel eleganter ist, aber man konnte immer diese zu Ihrem CSS hinzufügen:

.list-group { 
    -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
    -moz-column-count: 3; /* Firefox */ 
    column-count: 3; 

    -webkit-column-gap: 0; /* Chrome, Safari, Opera */ 
    -moz-column-gap: 0; /* Firefox */ 
    column-gap: 0; 
} 

dann jede Spalte Bootstrap machen col-md-12 etwa so:

<ul class="list-group"> 
    <button class="btn col-md-12">Row1</button> 
    <button class="btn col-md-12">Row2</button> 
    <button class="btn col-md-12">Row3</button> 
    <button class="btn col-md-12">Row4</button> 
    <button class="btn col-md-12">Row5</button> 
    <button class="btn col-md-12">Row6</button> 
</ul> 

Ich bekomme das gleiche Ergebnis. See here on bootply.