Foundation Grid - Dispositivos pequeños
Supongamos que tenemos una cuadrícula simple en dispositivos pequeños, con dos columnas cuyas proporciones de ancho son 25% y 75%.
Consejo:Los dispositivos pequeños se definen como pantallas de menos de40.0625em。
En dispositivos pequeños usamos.small-*clase.
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
El siguiente ejemplo establece dos columnas con una proporción del 25% y 75% (Foundation es mobile-first: si no se indica lo contrario, en dispositivos grandes se hereda el código de la clase .small):.small in them and use those".
Ejemplo
<div
class="row">
<div class="small-3 columns" style="background-color:yellow;">
<p>Tutorial para novatos</p>
</div>
<div class="small-9 columns" style="background-color:pink;">
<p>Tutorial para novatos</p>
</div>
</div>
<div class="small-3 columns" style="background-color:yellow;">
<p>Tutorial para novatos</p>
</div>
<div class="small-9 columns" style="background-color:pink;">
<p>Tutorial para novatos</p>
</div>
</div>
Pruébalo »
 |
Nota:¡Asegúrate de que las columnas sumen 12 en total! |
|---|
Si necesitas establecer una proporción de 33.3%/66.6%, puedes usar.small-4y.small-8:
Ejemplo
<div
class="row">
<div class="small-4 columns" style="background-color:yellow;">
<p>Tutorial para novatos</p>
</div>
<div class="small-8 columns" style="background-color:pink;">
<p>Tutorial para novatos</p>
</div>
</div>
<div class="small-4 columns" style="background-color:yellow;">
<p>Tutorial para novatos</p>
</div>
<div class="small-8 columns" style="background-color:pink;">
<p>Tutorial para novatos</p>
</div>
</div>
Pruébalo »