Fundação Grid - pequenos dispositivos
Suponha que temos um layout de grade simples em dispositivos pequenos, dois, largura de 25% e 75%.
Dica: Definir tela do dispositivo pequeno é inferior a 40.0625em .
Nós usamos pequenos dispositivos .small-* categoria.
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
Os exemplos a seguir criar duas colunas, a proporção foi de 25% e 75% (Fundação é móvel em primeiro lugar: Se não for especificado, o grande equipamento de herdarão .small código de classe): .small . Neles Aqueles ea utilização "
Exemplos
<Div class = "linha">
<Div class = "small-3 colunas" style = "background-color: amarelo;">
<P>? Este tutorial </ p>
</ Div>
<Div class = "pequenos-9 colunas" style = "background-color: rosa;">
<P>? Este tutorial </ p>
</ Div>
</ Div>
<Div class = "small-3 colunas" style = "background-color: amarelo;">
<P>? Este tutorial </ p>
</ Div>
<Div class = "pequenos-9 colunas" style = "background-color: rosa;">
<P>? Este tutorial </ p>
</ Div>
</ Div>
tente »
 | Nota: Para garantir que o número de colunas adicionar até 12! |
|---|
Se você precisa configurar relação de 33,3% / 66,6%, você pode usar .small-4 e .small-8 :
Exemplos
<Div class = "linha">
<Div class = "small-4 colunas" style = "background-color: amarelo;">
<P>? Este tutorial </ p>
</ Div>
<Div class = "pequenos-8 colunas" style = "background-color: rosa;">
<P>? Este tutorial </ p>
</ Div>
</ Div>
<Div class = "small-4 colunas" style = "background-color: amarelo;">
<P>? Este tutorial </ p>
</ Div>
<Div class = "pequenos-8 colunas" style = "background-color: rosa;">
<P>? Este tutorial </ p>
</ Div>
</ Div>
tente »