多列項目組中的自舉項目順序

Question

我試圖更改Bootstrap列表組中按鈕的順序。我目前有以下佈局（第一行）。

我試圖實現列第一的佈局，像這樣。

我目前正在重新排序列表中要做到這一點，但我不知道是否有解決問題的一個更好的方法。

https://www.bootply.com/pFSlgefurQ

Answer 1

我不知道這是否是更優雅，但你總是可以添加到您的CSS：

.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; 
} 

然後使每個引導塔COL-MD-12，像這樣：

<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> 

我得到了同樣的結果。 See here on bootply。