排序引導柱從上到下而不是從左到右

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> 

這樣做可以讓您控制每列中您想要的項目數。這比一個循環有點複雜，但它應該可以做到。