Bootstrap Grid - Large Devices

Bootstrap Exemplo Grid: Dispositivos grandes

No capítulo anterior, apresentamos um exemplo de grade com aulas para dispositivos pequenos e médios. Foram utilizados dois divs (colunas) e deu-lhes um 25%/75% dividido em pequenos dispositivos, e uma 50%/50% dividida em dispositivos de média:

Mas em grandes dispositivos do projeto pode ser melhor como um 33%/66% dividido.

Dica: Dispositivos grandes são definidas como tendo uma largura de tela de 1200 pixels e acima.

Para grandes dispositivos usaremos os .col-lg-* classes.

Então agora vamos adicionar as larguras das colunas para grandes dispositivos:

Agora Bootstrap vai dizer "no tamanho pequeno, olhar para as classes com -sm- em-los e usá-los. No tamanho médio, olhar para as classes com -md- em-los e usá-los. Ao grande tamanho, olhar classes com a palavra -lg- neles e usá-las ".

O exemplo a seguir irá resultar em um 25%/75% dividido em pequenos dispositivos, um 50%/50% dividida em dispositivos de média, e uma 33%/66% dividido em grandes dispositivos:

Usando apenas as grandes

No exemplo abaixo, nós só especificar a .col-lg-6 classe (sem .col-md-* e / ou .col-sm-* ). Isto significa que grandes dispositivos vão dividir 50% / 50%. No entanto, para dispositivos de médio e pequeno porte, que serão empilhados verticalmente (100% largura):