Foundation Grids - Großgeräte
Das letzte Kapitel haben wir den Anteil der mittelgroßen Geräte und kleine Geräte Grid-Layout, Kleingeräte für die 25% / 75% (.small-3 und .small-9), aber der Anteil der mittelgroßen Anlagen für 50% / 50% (.medium-6 und .medium-6):
<div class="small-3 medium-6 columns">dede</div> <div class="small-9 medium-6 columns">dede</div>
Auf Großgeräte, empfehlen wir ein Verhältnis von 33% / 66%.
Tipp: Die Bildschirmgröße ist größer als die Definition von Großgeräten 64.0625em.
Der Einsatz von Großgeräten .large-*
Kategorie.
Nun fügen wir zwei auf der Großgeräte:
<div class="small-3 medium-6 large-4 columns">dede</div> <div class="small-9 medium-6 large-8 columns">dede</div>
auflösen
- Der Anteil der kleinen Geräten mit zwei Spalten von% 25/75% (
.small-3
und.small-9
) - Der Anteil der mittelgroßen Gerät mit zwei Spalten von% 50/50% (
.medium-6
und.medium-6
) - Der Anteil von Großgeräten mit zwei Spalten% von 33/66% (
.large-4
und.large-8
)
Beispiele
<Div class = "small-3 mittel-6 groß 4 Spalten" style = "background-color: gelb;">
<P> Dieses Tutorial </ p>
</ Div>
<Div class = "small-9 mittel-6 groß 8 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! |
Enge Einsatz auf großen Anlagen
Das folgende Beispiel, wir geben .large-6
- Klasse (und .medium- nicht * .small-*
). Dies zeigt, dass ein Großteil der Ausrüstung 50% / 50% beträgt. Aber in der mittleren oder kleinen Gerät horizontal gestapelt (100% Breite):
Beispiele
<Div class = "large-6 Spalten" style = "background-color: gelb;">
<P> Dieses Tutorial </ p>
</ Div>
<Div class = "large-6 Spalten" style = "background-color: rosa;">
<P> Dieses Tutorial </ p>
</ Div>
</ Div>
Versuchen »