Rejilla Fundación - pequeños dispositivos
Supongamos que tenemos un diseño de cuadrícula simple en pequeños dispositivos, dos, la relación de anchura del 25% y el 75%.
Consejo: Definir pantalla pequeño dispositivo es menor que 40.0625em .
Utilizamos pequeños dispositivos .small-* categoría.
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
Los siguientes ejemplos establecieron dos columnas, la proporción era de 25% y 75% (Fundación es móvil en primer lugar: Si no se especifica, el equipo grande heredará .small código de clase): .small en ellos los y utilización ".
Ejemplos
<Div class = "fila">
<Div class = "small-3 columnas" style = "background-color: amarillo;">
<P>? Este tutorial </ p>
</ Div>
<Div class = "small-9 estilo de columnas" = "background-color: rosa;">
<P>? Este tutorial </ p>
</ Div>
</ Div>
<Div class = "small-3 columnas" style = "background-color: amarillo;">
<P>? Este tutorial </ p>
</ Div>
<Div class = "small-9 estilo de columnas" = "background-color: rosa;">
<P>? Este tutorial </ p>
</ Div>
</ Div>
Trate »
 | Nota: Para garantizar que el número de columnas se suman a 12! |
|---|
Si necesita establecer relación de 33,3% / 66,6%, puede utilizar .small-4 y .small-8 :
Ejemplos
<Div class = "fila">
<Div class = "small-4 columnas" style = "background-color: amarillo;">
<P>? Este tutorial </ p>
</ Div>
<Div class = "small-8 estilo de columnas" = "background-color: rosa;">
<P>? Este tutorial </ p>
</ Div>
</ Div>
<Div class = "small-4 columnas" style = "background-color: amarillo;">
<P>? Este tutorial </ p>
</ Div>
<Div class = "small-8 estilo de columnas" = "background-color: rosa;">
<P>? Este tutorial </ p>
</ Div>
</ Div>
Trate »