Passar para o conteúdo principal
Usar um contêiner em uma página
Atualizado há mais de uma semana

Elemento de contêiner

Observação: as informações neste artigo se aplicam apenas às páginas web.

Uma página sempre requer um elemento de contêiner para envolver qualquer elemento ou Widget (um ou vários) mas você não pode embrulhar um contêiner dentro de outro.

Em um elemento de contêiner, você pode definir até 4 colunas e também definir larguras diferentes para cada uma dessas colunas. Isso dá a você a capacidade de obter uma ampla variedade de designs. Essas colunas se comportam de maneira diferente dependendo do tamanho da tela (como telas de dispositivos móveis).

É assim que nosso sistema de grade se adapta dependendo do tamanho da tela:

Telas grandes (≥1200 px)

Telas médias (≥992 px)

Telas pequenas (≥768 px)

Telas extra pequenas (<768px)

Comportamento da coluna

Horizontal

Vertical (empilhado)

Largura do contêiner

1170 px

970 px

750px

Automático (100%)

Largura de banda

30px (15px em cada lado de uma coluna)

Aqui você pode ver um exemplo do sistema de grade em ação e como as colunas são empilhadas em telas menores :


Respondeu à sua pergunta?