Fundacja grid - małe urządzenia
Załóżmy, że mamy prosty układ siatki o małych urządzeniach, dwa, szerokość stosunku 25% do 75%.
Wskazówka: Zdefiniuj mały ekran urządzenia jest mniejsza niż 40.0625em .
Używamy małych urządzeń .small-* kategorii.
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
Poniższe przykłady skonfigurować dwie kolumny, wskaźnik ten wynosił 25% i 75% (Fundacja jest ruchoma pierwsza: Jeśli nie podano, duży sprzęt będzie dziedziczyć .small kod klasy): .small . W nich tych elementów i ich wykorzystywania "
Przykłady
<Div class = "wiersz">
<Div class = "small-3 kolumny" style = "background-color: yellow;">
<P>? Ten poradnik </ p>
</ Div>
<Div class = "small-9 kolumny" style = "background-color: różowy;">
<P>? Ten poradnik </ p>
</ Div>
</ Div>
<Div class = "small-3 kolumny" style = "background-color: yellow;">
<P>? Ten poradnik </ p>
</ Div>
<Div class = "small-9 kolumny" style = "background-color: różowy;">
<P>? Ten poradnik </ p>
</ Div>
</ Div>
Spróbuj »
 | Uwaga: Aby upewnić się, że liczba kolumn sumują się do 12! |
|---|
Jeśli trzeba ustawić współczynnik 33,3% / 66,6%, można użyć .small-4 i .small-8 :
Przykłady
<Div class = "wiersz">
<Div class = "small-4 kolumny" style = "background-color: yellow;">
<P>? Ten poradnik </ p>
</ Div>
<Div class = "small-8 kolumn" style = "background-color: różowy;">
<P>? Ten poradnik </ p>
</ Div>
</ Div>
<Div class = "small-4 kolumny" style = "background-color: yellow;">
<P>? Ten poradnik </ p>
</ Div>
<Div class = "small-8 kolumn" style = "background-color: różowy;">
<P>? Ten poradnik </ p>
</ Div>
</ Div>
Spróbuj »