html - 从上到下而不是从左到右对 bootstrap 列进行排序

Question

我正在使用循环调用 Bootstrap 列:

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

默认情况下， Bootstrap 从左到右对列进行排序:

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

虽然我想通过这个特定的循环从上到下排序:

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

如何在仍然使用常规 Bootstrap 列的同时最好地实现这一目标？

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> 

Fiddle here .显然，这不是问题，因为 div 是 block 元素，但如果您想使用其他东西，请确保它有 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>

这样做可以让您控制每列中所需的元素数。它比只有一个循环有点困惑，但它应该可以解决问题。