多列项目组中的Bootstrap项目顺序

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

然后使每个Bootstrap列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