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">dede</div> <div class="small-9 columns">dede</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 »