---
url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/design/griglia-bootstrap'
title: 'Pianifica le larghezze di colonna sulla griglia a 12 colonne | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T03:01:22+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Ogni riga aggiunta sta sulla griglia Bootstrap: dodici tracce uguali condivise dalle sue colonne. Un layout come 1/3 + 2/3 dà a una colonna quattro tracce e all’altra otto. Usa questa pagina per pianificare larghezze che tornano, e per dare a una riga un secondo layout per schermi più piccoli. Per aggiungere una riga, vedi Aggiungere una Row.
  Il video dà a una riga di 4 colonne un secondo layout per tablet, poi restringe la finestra.
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: 'Pianifica le larghezze di colonna sulla griglia a 12 colonne'
      description: |-
        Ogni riga aggiunta sta sulla griglia Bootstrap: dodici tracce uguali condivise dalle sue colonne. Un layout come 1/3 + 2/3 dà a una colonna quattro tracce e all’altra otto. Usa questa pagina per pianificare larghezze che tornano, e per dare a una riga un secondo layout per schermi più piccoli. Per aggiungere una riga, vedi Aggiungere una Row.
        Il video dà a una riga di 4 colonne un secondo layout per tablet, poi restringe la finestra.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T03:01:22+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/it/hc/documentazione/impara-dxpr-builder/design/griglia-bootstrap'
      articleSection: 'Guide di design'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/design/griglia-bootstrap'
      description: |-
        Ogni riga aggiunta sta sulla griglia Bootstrap: dodici tracce uguali condivise dalle sue colonne. Un layout come 1/3 + 2/3 dà a una colonna quattro tracce e all’altra otto. Usa questa pagina per pianificare larghezze che tornano, e per dare a una riga un secondo layout per schermi più piccoli. Per aggiungere una riga, vedi Aggiungere una Row.
        Il video dà a una riga di 4 colonne un secondo layout per tablet, poi restringe la finestra.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/it'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: it
---
[Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Crea le pagine](/it/hc/documentation/learn-dxpr-builder/build) /[Dai stile agli elementi](/it/hc/documentation/learn-dxpr-builder/element-settings) /[Guide di design](/it/hc/documentation/learn-dxpr-builder/design/overview) # Pianifica le larghezze di colonna sulla griglia a 12 colonne.

 Impara DXPR BuilderCrea le pagineDai stile agli elementiGuide di design

   ## In questa guida

 Guide correlate

- [Aggiunta di una riga](/it/hc/documentazione/impara-dxpr-builder/layout/righe-e-colonne)
- [Rendi il layout funzionale sui telefoni](/it/hc/documentazione/impara-dxpr-builder/design/design-responsive)
- [Aggiunta di un layout annidato](/it/hc/documentazione/impara-dxpr-builder/layout/annidamento)

Ogni riga aggiunta sta sulla griglia Bootstrap: dodici tracce uguali condivise dalle sue colonne. Un layout come 1/3 + 2/3 dà a una colonna quattro tracce e all’altra otto. Usa questa pagina per pianificare larghezze che tornano, e per dare a una riga un secondo layout per schermi più piccoli. Per aggiungere una riga, vedi [Aggiungere una Row](/it/hc/documentazione/impara-dxpr-builder/layout/righe-e-colonne).

Il video dà a una riga di 4 colonne un secondo layout per tablet, poi restringe la finestra.

  ## Come le frazioni diventano tracce

| Frazione | Tracce | Uso tipico |
|---|---|---|
| 1/1 | 12 | Una colonna a larghezza intera |
| 1/2 | 6 | Due colonne uguali |
| 1/3 | 4 | Tre colonne uguali, o una sidebar accanto a 2/3 |
| 2/3 | 8 | Contenuto principale accanto a una sidebar 1/3 |
| 1/4 | 3 | Quattro colonne uguali, o una sidebar accanto a 3/4 |
| 3/4 | 9 | Contenuto principale accanto a una sidebar 1/4 |
| 1/6 | 2 | Sei piccole colonne, come una riga di loghi |
| 5/12 e 7/12 | 5 e 7 | Due colonne di larghezza quasi uguale |

Le tracce di una riga sommano a 12. Quando sommano di più, le colonne in eccesso vanno a capo. Usa frazioni che danno tracce intere: metà, terzi, quarti, sesti e dodicesimi. Una frazione come 1/5 non ha una classe Bootstrap corrispondente.

Una riga dentro una colonna divide quella colonna nelle sue dodici tracce. Vedi [Annidamento](/it/hc/documentazione/impara-dxpr-builder/layout/annidamento).

## Dai a una riga un altro layout sui tablet

Il layout scelto per una riga nuova vale da **Medium devices (≥ 768px)** in su. Sotto quella larghezza, le colonne si impilano. Questi passaggi mantengono quattro colonne sui desktop e ne mostrano due per riga sui tablet.

1. Passa sopra la riga con il mouse e fai clic sull’icona griglia nella sua barra di controllo. La finestra dei layout si apre sul pannello **Medium devices (≥ 768px)**.
2. Scegli il riquadro con quattro colonne uguali.
3. Fai clic su **Add screen size**. Si apre un secondo pannello con una copia del layout.
4. Nell’elenco delle dimensioni di schermo del nuovo pannello, scegli **Small devices (≥ 576px)**.
5. Fai clic su **Custom Layout**, digita `1/2 + 1/2 + 1/2 + 1/2` e fai clic su **Save**.
6. Fai clic su **Save** sulla barra.

Quattro metà mantengono tutte e quattro le colonne e ne mettono due per riga. Un riquadro con due colonne ridurrebbe invece la riga a due colonne.

## Cosa vedrai

Su uno schermo largo la riga mostra quattro colonne fianco a fianco. Restringi la finestra del browser sotto i 768 pixel e vanno a capo due per due. Sotto i 576 pixel, ogni colonna prende tutta la larghezza.

## Dimensioni di schermo

Ogni pannello nella finestra dei layout imposta le colonne per una dimensione di schermo. Il layout vale anche per schermi più grandi, fino alla prossima dimensione con un proprio pannello.

| Pannello | Vale da |
|---|---|
| **Extra small (< 576px)** | Dai telefoni più piccoli in su |
| **Small devices (≥ 576px)** | 576 pixel |
| **Medium devices (≥ 768px)** | 768 pixel; il primo pannello di una riga nuova |
| **Large devices (≥ 992px)** | 992 pixel |
| **Extra large (≥ 1200px)** | 1200 pixel |
| **Extra extra large (≥ 1400px)** | 1400 pixel |

**Remove screen size** elimina un pannello e il suo layout. **Custom Layout** accetta qualsiasi elenco di frazioni, come `1/4 + 1/2 + 1/4`. Quando il layout di un pannello non è uno dei riquadri, la finestra marca **Custom Layout** e indica il layout su di esso, come **Custom Layout (1/2 + 1/2 + 1/2 + 1/2)**. Fai clic per modificare quel layout nel riquadro di layout personalizzato.

## Bootstrap sul tuo sito

La griglia richiede Bootstrap 5 nella pagina. Un amministratore del sito sceglie da dove viene in **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`), in **Bootstrap**. **Sideload Bootstrap files** offre **Bootstrap 5**, che il builder carica da sé, o **None (theme provides Bootstrap)**.

## Se non vedi il layout

- **Le colonne si impilano su ogni dimensione di schermo.** Nessun Bootstrap è caricato: l’impostazione è **None (theme provides Bootstrap)** e il tema non lo carica. Scegli **Bootstrap 5** in **Sideload Bootstrap files** in `/admin/dxpr_studio/dxpr_builder/settings`.
- **Il layout desktop ha perso colonne.** Hai scelto un riquadro con meno colonne per un’altra dimensione di schermo, e il builder ha ridotto i layout a larghezza uguale per corrispondere. Annulla la modifica, come mostra [Annulla e ripeti](/it/hc/documentazione/impara-dxpr-builder/modifica/annullare-e-ripetere), e usa **Custom Layout** con una frazione per colonna.
- **L’ultima colonna scende a una nuova riga.** Le frazioni sommano a più di una riga di 12 tracce. Falle sommare a 1, come `1/4 + 3/4`.
- **Una colonna personalizzata non ha larghezza chiara.** La sua frazione, come 1/5, non ha classe Bootstrap. Usa metà, terzi, quarti, sesti o dodicesimi.

## Prossimi passi

- [Aggiungere una Row](/it/hc/documentazione/impara-dxpr-builder/layout/righe-e-colonne): aggiungi righe e scegli un preset di colonne.
- [Design responsive](/it/hc/documentazione/impara-dxpr-builder/design/design-responsive): mostra o nascondi elementi su telefoni, tablet o desktop.
- [Annidamento](/it/hc/documentazione/impara-dxpr-builder/layout/annidamento): metti righe dentro colonne per layout più fini.