Planear larguras de coluna na grelha de 12 colunas.

Cada linha adicionada assenta na grelha Bootstrap: doze faixas iguais que as colunas partilham. Um esquema como 1/3 + 2/3 dá a uma coluna quatro faixas e à outra oito. Use esta página para planear larguras que somam certo, e para dar a uma linha um segundo esquema para ecrãs mais pequenos. Para adicionar uma linha de raiz, consulte Adicionar uma linha.

O vídeo dá a uma linha de 4 colunas um segundo esquema para tablets e depois estreita a janela.

Como as frações viram faixas

As faixas de uma linha somam 12. Quando somam mais, as colunas extra passam para uma nova linha. Use frações que dão faixas inteiras: metades, terços, quartos, sextos e duodécimos. Uma fração como 1/5 não tem classe Bootstrap correspondente.

Uma linha dentro de uma coluna divide essa coluna nas suas próprias doze faixas. Consulte Encaixe.

Dar a uma linha outro esquema em tablets

O esquema escolhido para uma linha nova aplica-se a partir de Medium devices (≥ 768px) para cima. Abaixo dessa largura, as colunas empilham. Estes passos mantêm quatro colunas em computadores e mostram duas por linha em tablets.

1. Paire sobre a linha e clique no ícone de grelha na barra de controlos. O diálogo de esquema abre no painel Medium devices (≥ 768px).
2. Escolha o mosaico com quatro colunas iguais.
3. Clique em Add screen size. Um segundo painel abre com uma cópia do esquema.
4. Na lista de tamanhos de ecrã do novo painel, escolha Small devices (≥ 576px).
5. Clique em Custom Layout, escreva 1/2 + 1/2 + 1/2 + 1/2 e clique em Save.
6. Clique em Save na barra de ferramentas.

Quatro metades mantêm as quatro colunas e põem duas em cada linha. Um mosaico com duas colunas reduziria antes a linha a duas colunas.

O que vê

Num ecrã largo, a linha mostra quatro colunas lado a lado. Estreite a janela do navegador abaixo de 768 píxeis e passam a duas por linha. Abaixo de 576 píxeis, cada coluna ocupa a largura total.

Tamanhos de ecrã

Cada painel no diálogo de esquema define as colunas para um tamanho de ecrã. O esquema também vale para ecrãs maiores, até ao próximo tamanho com painel próprio.

Remove screen size elimina um painel e o esquema. Custom Layout aceita qualquer lista de frações, por exemplo 1/4 + 1/2 + 1/4. Quando o esquema de um painel não é nenhum dos mosaicos, o diálogo marca Custom Layout e indica o esquema nele, por exemplo Custom Layout (1/2 + 1/2 + 1/2 + 1/2). Clique para editar esse esquema na caixa de esquema personalizado.

Bootstrap no site

A grelha precisa do Bootstrap 5 na página. Um administrador do site escolhe a origem em DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings), em Bootstrap. Sideload Bootstrap files oferece Bootstrap 5, que o construtor carrega, ou None (theme provides Bootstrap).

Se o esquema não aparece

• Columns stack on every screen size. Não há Bootstrap carregado: a definição é None (theme provides Bootstrap) e o tema não o carrega. Escolha Bootstrap 5 em Sideload Bootstrap files em /admin/dxpr_studio/dxpr_builder/settings.
• The desktop layout lost columns. Escolheu um mosaico com menos colunas para outro tamanho de ecrã, e o construtor reduziu os esquemas de larguras iguais para acompanhar. Anule a alteração, como Anular e refazer mostra, e use Custom Layout com uma fração por coluna.
• The last column drops to a new line. As frações somam mais de uma linha de 12 faixas. Faça-as somar 1, por exemplo 1/4 + 3/4.
• A custom column has no clear width. A fração, por exemplo 1/5, não tem classe Bootstrap. Use metades, terços, quartos, sextos ou duodécimos.

O que se segue?

• Adicionar uma linha: adicione linhas e escolha uma predefinição de colunas.
• Design responsivo: mostre ou esconda elementos em telemóveis, tablets ou computadores.
• Encaixe: coloque linhas dentro de colunas para esquemas mais finos.