Was bedeutet "horizontal immer"?

Question

Das neue Bootstrap drei Dokumentation explains the grid behaviour als "Horizontal immer" für extra kleine Geräte. Was bedeutet das? Sicherlich würden auf einem kleinen Gerät alle Spalten vertikal übereinander gestapelt sein? Was mir fehlt, ist mein (mangelndes) Verständnis dafür, was ein Raster ist.

Ich komme aus einer Nicht-Designer-Perspektive und versuche, über eine Anzahl von Produkten in ein reaktives Raster zu iterieren. Die Anzahl der Spalten in jeder Zeile ändert sich, abhängig davon, ob eine gerade oder ungerade Anzahl von Produkten angezeigt wird. < - Bootstrap und ähnliche scheint einfach mit statischem Inhalt über dynamische Seiten. Zum Beispiel, müssen wir leer <div class="col-xs*"></div> einfügen, um es bis zu 12 zu machen?

Answer 1

Was "horizontal zu allen Zeiten" bedeutet, ist, dass es keinen Haltepunkt gibt, bei dem sich col-xs- * von floated nach stacked ändert. Zum Beispiel:

<div class="col-xs-6"></div> 
<div class="col-xs-6"></div> 

In diesem Beispiel wird es immer zwei Spalten gleich groß sein, egal ob Sie auf einem Smartphone, Tablet sind, oder Desktop. Für Kontrast:

<div class="col-sm-6"></div> 
<div class="col-sm-6"></div> 

In diesem Beispiel werden die Spalten gestapelt werden, bis das Darstellungsfeld des Gerätes ist> = 768, an welcher Stelle es zu zwei Spalten von gleicher Größe wechseln.

Die Frage, die Sie sich vielleicht stellen, ist: "Warum all diese Variationen?" Nun, diese Optionen geben uns die Möglichkeit, das Layout auf verschiedenen Geräten anzupassen, ohne uns in CSS die Hände schmutzig zu machen. Zum Beispiel wollte, wenn ich zwei gleiche Spalten auf einem Telefon, aber ein 75/25 Split auf Tabletten und, würde ich Folgendes tun:

<div class="col-xs-6 col-sm-8"></div> 
<div class="col-xs-6 col-sm-4"></div> 

Wenn Sie auf Handys gestapelt wollten, gleich auf Tablette und 75/25 auf dem Desktop, dies dann tun:

<div class="col-sm-6 col-md-8"></div> 
<div class="col-sm-6 col-md-4"></div> 

Weil Sie nicht explizit sind ein Raster für das Telefon der Angabe, es gestapelt zurückkehren wird.

Um ein solides Gefühl zu erhalten, werfen Sie einige einfache Gitter zusammen und beginnen Sie dann, die Größe Ihres Browsers zu ändern. Sie sollten sehen können, wie es sich viel leichter ändert als in der Dokumentation selbst.

EDIT

Gedanke an einer anderen Beispiel, die von Interesse sein könnte: zwei beide gleiche Spalten dann 75/25 und Desktop auf Telefon und Tablet. Der Code:

Dies ist eigentlich eine großartige Illustration von "Horizontal zu allen Zeiten." Da wir kein col-sm angeben, wird col-xs weiterhin erzwungen, bis wir den Desktop-Haltepunkt erreichen, der auf> = 992 gesetzt ist.