HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Esempi di griglia Bootstrap 4

❮ Precedente Prossimo ❯

Di seguito abbiamo raccolto alcuni esempi di layout di griglia Bootstrap 4.

Tre colonne uguali

Usa la .colclasse su un numero specificato di elementi e Bootstrap riconoscerà quanti elementi ci sono (e creerà colonne di uguale larghezza). Nell'esempio seguente, utilizziamo tre elementi col, che ottengono una larghezza del 33,33% ciascuno.

col
col
col

Esempio

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Tre colonne uguali usando i numeri

Puoi anche usare i numeri per controllare la larghezza della colonna. Assicurati solo che la somma sia 12 o meno (non è necessario utilizzare tutte le 12 colonne disponibili):

col-4
col-4
col-4

Esempio

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>

Tre colonne disuguali

Per creare colonne disuguali, devi usare i numeri. L'esempio seguente creerà una divisione 25%/50%/25%:

col-3
col-6
col-3

Esempio

<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
</div>

Impostazione della larghezza di una colonna

Tuttavia, è sufficiente impostare solo la larghezza di una colonna e fare in modo che le colonne di pari livello si ridimensionino automaticamente attorno ad essa. L'esempio seguente creerà una divisione 25%/50%/25%:

col
col-6
col

Esempio

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

Più colonne uguali

1 di 2
2 di 2
1 di 4
2 di 4
3 di 4
4 di 4
1 di 6
2 di 6
3 di 6
4 di 6
5 di 6
6 di 6

Esempio

<!-- Two equal columns -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four equal columns -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<!-- Six equal columns -->
<div class="row">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Riga Cols

Puoi anche controllare quante colonne dovrebbero apparire una accanto all'altra (indipendentemente da quante colonne), con le .row-cols-*classi:

1 di 2
2 di 2
1 di 4
2 di 4
3 di 4
4 di 4
1 di 6
2 di 6
3 di 6
4 di 6
5 di 6
6 di 6

Esempio

<div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Più colonne disuguali

1 di 2
2 di 2
1 di 4
2 di 4
3 di 4
4 di 4
1 di 4
2 di 4
3 di 4
4 di 4

Esempio

<!-- Two Unequal Columns -->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>

<!-- Four Unequal Columns -->
<div class="row">
  <div class="col-2">1 of 4</div>
  <div class="col-2">2 of 4</div>
  <div class="col-2">3 of 4</div>
  <div class="col-6">4 of 4</div>
</div>

<!-- Setting two column widths -->
<div class="row">
  <div class="col-4">1 of 4</div>
  <div class="col-6">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

Uguale altezza

Se una delle colonne è più alta dell'altra (a causa dell'altezza del testo o del CSS), il resto seguirà:

Molto dolore è molto importante, non c'è differenza nel cibo e nei sensi. E il dolore che posso avere quel fine settimana. Nessuna cattiva iriure se la prende, e zril flats o qualcosa del genere, ha sovvenzionato uno di noi che ha visto il calcio. No, il nostro dolore deve essere letto da me, dovrebbe fargli diventare muco Platon.
col
col

Esempio

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Colonne nidificate

col-8
col-6
col-6
col-4

L'esempio seguente mostra come creare un layout a due colonne, con altre due colonne all'interno di una delle colonne:

Esempio

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

Classi reattive

Il sistema a griglia Bootstrap 4 ha cinque classi:

  • .col- (dispositivi extra piccoli - larghezza dello schermo inferiore a 576px)
  • .col-sm- (dispositivi di piccole dimensioni - larghezza dello schermo uguale o superiore a 576px)
  • .col-md- (dispositivi medi - larghezza dello schermo uguale o superiore a 768px)
  • .col-lg- (dispositivi di grandi dimensioni - larghezza dello schermo uguale o superiore a 992px)
  • .col-xl- (dispositivi xlarge - larghezza dello schermo uguale o superiore a 1200px)

Le classi sopra possono essere combinate per creare layout più dinamici e flessibili.

Suggerimento: ogni classe aumenta, quindi se desideri impostare le stesse larghezze per sme md, devi solo specificare sm.

Impilato in orizzontale

col-sm-9
col-sm-3
col-sm
col-sm
col-sm

L'esempio seguente mostra come creare un layout di colonna che inizia impilato su dispositivi extra piccoli, prima di diventare orizzontale su dispositivi più grandi (sm, md, lg e xl):

Esempio

<div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Mescolare e abbinare

col-6 col-sm-9
col-6 col-sm-3
col-7 col-lg-8
col-5 col-lg-4
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8

Esempio

<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>

<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>

<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>

Niente grondaie

Aggiungi la .no-guttersclasse al .rowcontenitore per rimuovere le grondaie (spazio extra):

Il dolore stesso è importante, ma il dolore è accresciuto dal processo adipico, ma gli do il tempo di ridurlo in modo da fare un ottimo lavoro e dolore.
Al fine di venire al minimo, chi dei nostri dovrebbe esercitare qualsiasi impiego se non per trarne vantaggio dalle conseguenze.
Ma perché tu comprenda donde ogni errore nato è il piacere di accusare e di lodare il dolore, aprirò tutto il discorso e ti spiegherò le stesse cose che furono dette da quell'inventore della verità e quasi artefice di la vita benedetta.

Esempio

<div class="row no-gutters">

❮ Precedente Prossimo ❯