排序引导柱从上到下而不是从左到右

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> 

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> 

这样做可以让您控制每列中您想要的项目数。这比一个循环有点复杂，但它应该可以做到。