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 ]

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

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是块元素，但如果你想使用其他东西，请确保它上面有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>

这样做可以让你控制你想要的每列中的项目数。它比一个循环更麻烦，但它应该可以解决这个问题。

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

1 个答案: