Grid Foundation - kleine Geräte
Angenommen, wir ein einfaches Raster-Layout auf kleinen Geräten, zwei, Breite-Verhältnis von 25% und 75%.
Tipp: Legen Sie kleine Gerät Bildschirm ist kleiner als 40.0625em .
Wir verwenden kleine Geräte .small-* Kategorie.
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
Die folgenden Beispiele zwei Spalten eingerichtet, das Verhältnis lag bei 25% und 75% (Foundation ist mobil erste: Wenn nicht anders angegeben, die große Ausrüstung wird .small Klasse Code erben): .small . In diesen sind solche und Verwendung "
Beispiele
<Div class = "Zeile">
<Div class = "small-3 Spalten" style = "background-color: gelb;">
<P>? Dieses Tutorial </ p>
</ Div>
<Div class = "small-9 Spalten" style = "background-color: rosa;">
<P>? Dieses Tutorial </ p>
</ Div>
</ Div>
<Div class = "small-3 Spalten" style = "background-color: gelb;">
<P>? Dieses Tutorial </ p>
</ Div>
<Div class = "small-9 Spalten" style = "background-color: rosa;">
<P>? Dieses Tutorial </ p>
</ Div>
</ Div>
Versuchen »
 | Hinweis: Um sicherzustellen , dass die Anzahl der Spalten hinzufügen bis zu 12! |
|---|
Wenn Sie 33,3% / 66,6% Verhältnis einrichten müssen, können Sie .small-4 und .small-8 :
Beispiele
<Div class = "Zeile">
<Div class = "small-4 Spalten" style = "background-color: gelb;">
<P>? Dieses Tutorial </ p>
</ Div>
<Div class = "small-8 Spalten" style = "background-color: rosa;">
<P>? Dieses Tutorial </ p>
</ Div>
</ Div>
<Div class = "small-4 Spalten" style = "background-color: gelb;">
<P>? Dieses Tutorial </ p>
</ Div>
<Div class = "small-8 Spalten" style = "background-color: rosa;">
<P>? Dieses Tutorial </ p>
</ Div>
</ Div>
Versuchen »