Griglia di Bootstrap 5: Dal stack all'allineamento orizzontale

Esempio di griglia: Allineamento orizzontale

Creiamo un sistema di griglia di base che inizia con lo stack su dispositivi ultra piccoli e diventa orizzontale su dispositivi più grandi.

Ecco un esempio di una semplice disposizione a due colonne in allineamento orizzontale, che significa che produrrà una divisione del 50/50 su tutti gli schermi, eccetto gli schermi ultra piccoli, che si stackeranno automaticamente (100%):

Esempio: Allineamento orizzontale

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Colonna 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Colonna 2 ...</p>
    </div>
  </div>
</div>

Prova personalmente

Suggerimento:.col-sm-* Il numero nella classe indica quante colonne il div dovrebbe coprire (complessivamente 12 colonne). Quindi,.col-sm-1 copre 1 colonna.col-sm-4 copre 4 colonne.col-sm-6 copre 6 colonne, ecc.

Attenzione:Assicurati che la somma sia uguale o inferiore a 12 (non è necessario utilizzare tutte le 12 colonne disponibili):

Suggerimento:attraverso .container-fluid classe in .containerpuoi cambiare qualsiasi larghezza piena convertito in larghezza fissa Layout responsiveness:

Esempio: Contenitore responsiveness

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Colonna 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>Colonna 2 ...</p>
    </div>
  </div>
</div>

Prova personalmente

Layout automatico delle colonne

In Bootstrap 5, c'è un modo semplice per creare colonne uniformi per tutti i dispositivi: basta togliere .col-size-* Rimuovere i numeri e utilizzare solo sul elemento col: .col-size Classi. Bootstrap riconosce quante colonne ci sono e ogni colonna avrà la stessa larghezza. Le classi di dimensione (sm, md, ecc.) determinano quando le colonne devono rispondere:

<!-- Due colonne: larghezza del 50% su tutti gli schermi, eccetto i dispositivi extra piccoli (larghezza del 100%) -->
<div class="row">
  <div class="col-sm">1 di 2</div>
  <div class="col-sm">2 di 2</div>
</div>
<!-- Quattro colonne: larghezza del 25% su tutti gli schermi, eccetto i dispositivi extra piccoli (larghezza del 100%) -->
<div class="row">
  <div class="col-sm">1 di 4</div>
  <div class="col-sm">2 di 4</div>
  <div class="col-sm">3 di 4</div>
  <div class="col-sm">4 di 4</div>
</div>

Prova personalmente