Bootstrap 5 Griglia: Dispositivi Piccoli

Esempio di griglia per dispositivi di piccola dimensione

XSmall Small Medium Large Extra Large XXL
Prefisso della classe .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Larghezza dello schermo <576px >=576px >=768px >=992px >=1200px >=1400px

Supponiamo di avere un layout semplice con due colonne. Per i dispositivi di piccola dimensione, desideriamo dividere le colonne del 25% / 75%.

I dispositivi di piccola dimensione vengono definiti come larghezza dello schermoDa 576 pixel a 767 pixel。

Per i dispositivi di piccola dimensione, utilizzeremo .col-sm-* Classe.

Aggiungeremo le seguenti classi alle due colonne:

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

L'esempio seguente produrrà una divisione del 25% / 75% su dispositivi di piccola (e media, grande, extra-large e ultra-large) dimensione. Sui dispositivi di ultra-piccola dimensione, verrà automaticamente accorpato (100%):

Esempio

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-primary">
      <p>La Fondazione mondiale per la natura (WWF), fondata il 29 aprile 1961, il suo logo è un panda gigante ...</p>
    </div>
    <div class="col-sm-9 bg-dark">
      <p>Nel 1980, la WWF è arrivata in Cina ufficialmente, invitata dal governo cinese per condurre il lavoro di protezione del panda gigante e del suo habitat ...</p>
    </div>
  </div>
</div>

Prova da solo

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

Per una divisione del 33.3% / 66.6%, dovresti utilizzare .col-sm-4 e .col-sm-8Per una divisione del 50% / 50%, dovresti utilizzare .col-sm-6 e .col-sm-6)：

Esempio

<!-- 33.3/66.6% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>La Fondazione mondiale per la natura (WWF), fondata il 29 aprile 1961, il suo logo è un panda gigante ...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>Nel 1980, la WWF è arrivata in Cina ufficialmente, invitata dal governo cinese per condurre il lavoro di protezione del panda gigante e del suo habitat ...</p>
    </div>
  </div>
</div>
<!-- Divisione 50/50: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>La Fondazione mondiale per la natura (WWF), fondata il 29 aprile 1961, il suo logo è un panda gigante ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Nel 1980, la WWF è arrivata in Cina ufficialmente, invitata dal governo cinese per condurre il lavoro di protezione del panda gigante e del suo habitat ...</p>
    </div>
  </div>
</div>

Prova da solo

colonne di layout automatico

In Bootstrap 5, c'è un modo semplice per creare colonne ugualmente larghe per tutti i dispositivi: è sufficiente partire da .col-sm-* rimuovere i numeri e utilizzare solo elemento colusata .col-sm La classe. Bootstrap riconoscerà il numero di colonne e ogni colonna avrà la stessa larghezza.

Se la dimensione dello schermoMeno di 576px, le colonne saranno impilate orizzontalmente:

<!-- Due colonne: larghezza del 50% su tutti gli schermi, eccetto i dispositivi di ultra piccola taglia (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 di ultra piccola taglia (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 da solo

Il capitolo successivo mostrerà come aggiungere diverse percentuali di divisione per i dispositivi di media.