--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/design/grelha-bootstrap' title: 'Planear larguras de coluna na grelha de 12 colunas | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:47:05+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Planear larguras de coluna na grelha de 12 colunas' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:47:05+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/design/grelha-bootstrap' articleSection: 'Guias de design' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/design/grelha-bootstrap' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Início item: 'https://dxpr.com/pt-pt' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pt-pt --- [Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Estilizar os elementos](/pt-pt/hc/documentation/learn-dxpr-builder/element-settings) /[Guias de design](/pt-pt/hc/documentation/learn-dxpr-builder/design/overview) # Planear larguras de coluna na grelha de 12 colunas. Aprender DXPR BuilderCriar páginasEstilizar os elementosGuias de design ## Neste guia Guias relacionados - [Adicionar uma fila](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/filas-e-colunas) - [Adaptar o esquema aos telemóveis](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/design-responsivo) - [Adicionar um esquema aninhado](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/aninhamento) 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](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/filas-e-colunas). 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 | Fraction | Tracks | Typical use | |---|---|---| | 1/1 | 12 | Uma coluna de largura total | | 1/2 | 6 | Duas colunas iguais | | 1/3 | 4 | Três colunas iguais, ou uma barra lateral junto a 2/3 | | 2/3 | 8 | Conteúdo principal junto a uma barra lateral de 1/3 | | 1/4 | 3 | Quatro colunas iguais, ou uma barra lateral junto a 3/4 | | 3/4 | 9 | Conteúdo principal junto a uma barra lateral de 1/4 | | 1/6 | 2 | Seis colunas pequenas, como uma linha de logótipos | | 5/12 e 7/12 | 5 e 7 | Duas colunas de largura quase igual | 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](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/aninhamento). ## 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. | Panel | Applies from | |---|---| | **Extra small (< 576px)** | Dos telemóveis mais pequenos para cima | | **Small devices (≥ 576px)** | 576 píxeis | | **Medium devices (≥ 768px)** | 768 píxeis; o primeiro painel de uma linha nova | | **Large devices (≥ 992px)** | 992 píxeis | | **Extra large (≥ 1200px)** | 1200 píxeis | | **Extra extra large (≥ 1400px)** | 1400 píxeis | **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](/pt-pt/hc/documentacao/aprender-dxpr-builder/edicao/anular-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](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/filas-e-colunas): adicione linhas e escolha uma predefinição de colunas. - [Design responsivo](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/design-responsivo): mostre ou esconda elementos em telemóveis, tablets ou computadores. - [Encaixe](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/aninhamento): coloque linhas dentro de colunas para esquemas mais finos.