O que exatamente é offset em bootstrap? [duplicado]
esta pergunta já tem uma resposta aqui:
- Qual é a utilidade do offset no bootstrap? 1 resposta
eu entendo o que é grelha, basicamente uma linha inteira terá 12 espaços.
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
Basicamente, o que o código acima está a dividir os espaços em três secções, mas o que não entendo é, Qual é o objectivo de ... a fazer offset?
<div class="col-lg-6 col-md-offset-3">
</div>
O que faz exactamente o código acima?
2 answers
As compensações são utilizadas para os elementos de espaçamento na grelha sensível.
A unidade é baseada na disposição da coluna.
Você pode definir uma compensação desta forma : col-[ponto de paragem] - offset - [Número de colums]
Neste exemplo, admitir a nossa disposição é feita de 12 colunas:<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>test</p>
</div>
</div>
Significa que no intervalo médio do sistema de grelha, o elemento terá uma largura de 6 colums e haverá 3 colunas em branco antes do elemento (e como consequência, irá ter 3 colums em branco após .
O resultado disto é um div de 6 colums de largura, centrado no recipiente.
Existe um exemplo que mostra como ele aparece na documentação do Bootstrap. http://getbootstrap.com/css/#grid-offsetting
Deslocamento significa: mover as colunas para a direita usando as classes .col-md-offset-*
. Estas classes aumentam a margem esquerda de uma coluna por * colunas.
Por exemplo col-md-offset-3
aumenta a margem esquerda em 3 para os dispositivos médios.