Sortieren Bootstrap-Spalten von oben nach unten statt nach links von rechts

Question

Ich verwende eine Schleife Bootstrap-Spalten zu nennen:

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

standardmäßig Bootstrap sortieren Spalten links nach rechts:

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

Mit diesem besonderen Schleife, obwohl ich von oben nach unten sortieren möchte:

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

Wie kann ich das am besten erreichen, während Sie noch verwenden? die regulären Bootstrap-Spalten?

Answer 1

Eine Option, die Sie tun können, ist innere Array-Elemente innerhalb jeder Spalte. Ich denke, es wird mehr als nur eine Schleife benötigen.

Die Markup-Struktur wird wie folgt aussehen:

<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. Offensichtlich ist es kein Problem, da divs Blockelemente sind, aber wenn Sie etwas anderes verwenden möchten, stellen Sie sicher, dass es display: block; darauf hat.

Sie haben nicht markiert, ob Sie PHP oder .NET oder etwas anderes verwenden, aber meine Beispiel-Schleifen verwenden 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> 

Auf diese Weise können Sie steuern, wie viele Elemente in jeder Spalte Sie möchten. Es ist ein bisschen chaotischer als nur eine Schleife, aber es sollte den Trick tun.