Bootstrap 4 Beta: A remoção e restauração do deslocamento de coluna

Bootstrap 4, em sua versão Beta 1, introduziu mudanças significativas na forma como colunas foram deslocadas. No entanto, com o lançamento subsequente do Beta 2, essas alterações foram revertidas.

De offset-md-* para ml-auto

No Bootstrap 4 Beta 1, as classes offset-md-* foram removidas. Em vez disso, os desenvolvedores foram incentivados a usar a classe .ml-auto para compensar colunas. No entanto, este método não forneceu o mesmo nível de precisão da abordagem anterior.

Restaurando classes de deslocamento no Beta 2

Felizmente, no Beta 2, as classes de deslocamento foram restaurados. A nova sintaxe usa o formato offset-{breakpoint}-, substituindo a sintaxe anterior col-{breakpoint}-offset-.

Custom Offsetting

Para obter deslocamentos de coluna personalizados, como o agora obsoleto

  <div>

Usando ml-auto e mr-auto

Para centralizar duas colunas adjacentes, os desenvolvedores podem aplicar ml-auto e mr-auto a ambas as colunas.

    <div>

Usando mx-auto

Para centralizar uma única coluna, os desenvolvedores podem usar mx-auto para criar margens iguais em ambos os lados.

Conclusão

A remoção e restauração de deslocamentos de coluna no Bootstrap 4 criou alguma confusão temporária para os desenvolvedores. No entanto, com a reintrodução de classes de deslocamento específicas no Beta 2, juntamente com a disponibilidade de métodos de solução alternativa, os desenvolvedores podem continuar a obter layouts de colunas personalizados no Bootstrap 4.