从上到下而不是从左到右对引导列进行排序

Question

我正在使用循环来调用引导列：

<div class="col-xs-2">
Content
</div>

默认情况下，引导程序从左到右对列进行排序：

[ 1 ] --> [ 2 ] --> [ 3 ]
[ 4 ] --> [ 5 ] --> [ 6 ]
[ 7 ] --> [ 8 ] --> [ 9 ]

对于这个特定的循环，我想从上到下排序：

[ 1 ]  [ 4 ]  [ 7 ]
  V      V      V
[ 2 ]  [ 5 ]  [ 8 ]
  V      V      V
[ 3 ]  [ 6 ]  [ 9 ]

在仍然使用常规引导列的同时，如何才能最好地实现这一目标？

Answer 1

您可以做的一个选择是在每列中包含内部数组项。我认为它需要的不仅仅是一个循环。

标记结构将如下所示：

<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <div class="array-item">1</div>
            <div class="array-item">2</div>
            <div class="array-item">3</div>
        </div>
        <div class="col-xs-4">
            <div class="array-item">4</div>
            <div class="array-item">5</div>
            <div class="array-item">6</div>
        </div>
        <div class="col-xs-4">
            <div class="array-item">7</div>
            <div class="array-item">8</div>
            <div class="array-item">9</div>
        </div>        
    </div>
</div> 

在这里摆弄。显然，这不是问题，因为 div 是块元素，但如果您想使用其他元素，请确保它已包含display: block;在上面。

您尚未标记是否使用 PHP 或 .NET 或任何其他语言，但我下面的示例循环使用的是 C#。

<div class="container">
    <div class="row">   
        <div class="col-xs-4">
        @for (var i = 0; i < 3; i++) {
            <div class="array-item">array[i]</div>               
        }
        </div>
        <div class="col-xs-4">
        @for (var i = 3; i < 6; i++) {
            <div class="array-item">array[i]</div>               
        }
        </div>
        <div class="col-xs-4">
        @for (var i = 6; i < 9; i++) {
            <div class="array-item">array[i]</div>            
        }
        </div>        
    </div>
</div>

这样做可以让您控制每列中有多少个项目。这比只有一个循环有点混乱，但它应该可以解决问题。