Colonne

Scopri come modificare le colonne con una manciata di opzioni per l'allineamento, l'ordine e l'offset grazie al nostro sistema di griglia flexbox. Inoltre, scopri come utilizzare le classi di colonna per gestire le larghezze di elementi non di griglia.

Su questa pagina

Dritta! Assicurati di leggere la pagina Griglia prima di approfondire come modificare e personalizzare le colonne della griglia.

Come funzionano

Le colonne si basano sull'architettura flexbox della griglia. Flexbox significa che abbiamo opzioni per modificare singole colonne e modificare gruppi di colonne a livello di riga . Scegli tu come le colonne crescono, si restringono o cambiano in altro modo.
Quando si creano layout a griglia, tutto il contenuto va in colonne. La gerarchia della griglia di Bootstrap va dal contenitore alla riga alla colonna al tuo contenuto. In rare occasioni, puoi combinare contenuto e colonna, ma tieni presente che possono esserci conseguenze indesiderate.
Bootstrap include classi predefinite per la creazione di layout veloci e reattivi. Con sei punti di interruzione e una dozzina di colonne in ogni livello della griglia, abbiamo già creato dozzine di classi per consentirti di creare i layout desiderati. Questo può essere disabilitato tramite Sass se lo desideri.

Allineamento

Utilizzare le utilità di allineamento flexbox per allineare le colonne verticalmente e orizzontalmente.

Allineamento verticale

Una delle tre colonne

html

<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Una delle tre colonne

html

<div class="container text-center">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Allineamento orizzontale

Una delle due colonne

html

<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Avvolgimento delle colonne

Se più di 12 colonne sono posizionate all'interno di una singola riga, ogni gruppo di colonne extra verrà, come un'unica unità, a capo su una nuova riga.

.col-9

.col-4
Poiché 9 + 4 = 13 > 12, questo div a 4 colonne viene avvolto su una nuova riga come un'unità contigua.

.col-6
Le colonne successive continuano lungo la nuova riga.

html

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Interruzioni di colonna

Rompere le colonne in una nuova riga in flexbox richiede un piccolo trucco: aggiungi un elemento con width: 100%dove vuoi avvolgere le tue colonne in una nuova riga. Normalmente ciò si ottiene con più .rows, ma non tutti i metodi di implementazione possono tenerne conto.

.col-6 .col-sm-3

html

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

Puoi anche applicare questa interruzione a punti di interruzione specifici con le nostre utilità di visualizzazione reattiva .

.col-6 .col-sm-4

html

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Riordino

Ordina le classi

Usa .order-le classi per controllare l' ordine visivo dei tuoi contenuti. Queste classi sono reattive, quindi puoi impostare il orderpunto di interruzione per (ad esempio, .order-1.order-md-2). Include il supporto per 1tutti 5e sei i livelli della griglia.

Primo in DOM, nessun ordine applicato

Secondo in DOM, con un ordine più grande

Terzo in DOM, con un ordine di 1

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Esistono anche classi reattive .order-firste che modificano l' elemento di un elemento applicando e , rispettivamente. Queste classi possono anche essere mescolate con le classi numerate secondo necessità..order-lastorderorder: -1order: 6.order-*

Primo in DOM, ordinato per ultimo

Secondo in DOM, non ordinato

Terzo in DOM, ordinato per primo

html

<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Colonne di compensazione

Puoi compensare le colonne della griglia in due modi: le nostre .offset-classi di griglia reattive e le nostre utilità di margine . Le classi della griglia sono dimensionate per corrispondere alle colonne, mentre i margini sono più utili per layout rapidi in cui la larghezza dell'offset è variabile.

Classi offset

Sposta le colonne a destra usando le .offset-md-*classi. Queste classi aumentano il margine sinistro di una colonna di *colonne. Ad esempio, .offset-md-4si sposta .col-md-4su quattro colonne.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

Oltre alla cancellazione delle colonne nei punti di interruzione reattivi, potrebbe essere necessario reimpostare gli offset. Guardalo in azione nell'esempio della griglia .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Utilità di margine

Con il passaggio a flexbox nella v4, puoi utilizzare utilità .me-autodi margine come forzare le colonne di pari livello l'una dall'altra.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Classi di colonne autonome

Le .col-*classi possono essere utilizzate anche al di fuori di a .rowper assegnare a un elemento una larghezza specifica. Ogni volta che le classi di colonna vengono utilizzate come figli non diretti di una riga, i padding vengono omessi.

.col-3: larghezza del 25%

.col-sm-9: larghezza del 75% sopra sm breakpoint

html

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

Le classi possono essere utilizzate insieme alle utilità per creare immagini mobili reattive. Assicurati di avvolgere il contenuto in un .clearfixwrapper per cancellare il float se il testo è più breve.

Un paragrafo di testo segnaposto. Lo stiamo usando qui per mostrare l'uso della classe clearfix. Stiamo aggiungendo alcune frasi prive di significato qui per dimostrare come le colonne interagiscono qui con l'immagine fluttuante.

Come puoi vedere, i paragrafi avvolgono con grazia l'immagine fluttuata. Ora immagina come apparirebbe con alcuni contenuti reali qui, piuttosto che solo questo noioso testo segnaposto che va avanti all'infinito, ma in realtà non trasmette informazioni tangibili. Occupa semplicemente spazio e non dovrebbe essere letto.

Eppure, eccoti qui, ancora perseverante nella lettura di questo testo segnaposto, sperando in qualche approfondimento o qualche easter egg nascosto di contenuto. Uno scherzo, forse. Sfortunatamente, non c'è niente di tutto questo qui.

html

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>