bootstrap col-xs- * funktioniert nicht richtig

Question

Kann mir jemand helfen, herauszufinden, was mit meiner mobilen Version meiner Seite los ist? Ich modifiziere das Dashboard-Beispiel von getbootstrap.com. Ich möchte die mobile Version einer der Hauptreihen ändern, die als Zeilen mit je drei Divs angezeigt werden.

   <div class="row placeholders"> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Active Users</h4> 
         <span class="text-muted">Total Active Users</span> 
        </div> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Items</h4> 
         <span class="text-muted">Items in Database</span> 
        </div> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Label</h4> 
         <span class="text-muted">Something else</span> 
        </div> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Label</h4> 
         <span class="text-muted">Something else</span> 
        </div> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Label</h4> 
         <span class="text-muted">Something else</span> 
        </div> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Label</h4> 
         <span class="text-muted">Something else</span> 
        </div> 
       </div> 

Die col-xs ist normalerweise col-xs-6 in der Vorlage, mit insgesamt vier Säulen, die also bis 24. fügt hinzu, wenn Sie auf Handy zu sehen, zeigt es zwei in jeder Zeile (seit 24 zwei Reihen aufgeteilt wird von 12). Der komische Teil ist, dass ich es geändert habe, um col-xs-4 mit insgesamt sechs Spalten zu sein, die ich auf dem Handy als zwei Reihen von drei zeigen möchte. Aber wenn ich auf dem Handy anschaue, ist die erste Zeile 3, aber die erste Spalte der zweiten Zeile wird von selbst in eine dritte Zeile verschoben. Warum passiert dies??

Answer 1

Dies wird meistens verursacht, wenn eine der col-sm-4 Spalten eine andere (größere) Höhe als die anderen hat. Sie können dies beheben, indem Sie ein clearfix div zwischen den Zeilen hinzufügen oder indem Sie sicherstellen, dass die drei Spalten von gleicher Größe (Höhe) sind

Mein persönlicher Vorschlag ist, es über Javascript zu tun. Berechnen Sie die maximale Höhe aller Spalten und weisen Sie diese Höhe allen Spalten zu. Wenn Sie jedoch nur eine CSS-Lösung wünschen, können Sie die Einstellung max-height für die Spalten

in Betracht ziehen