Bootstrap prevede un grid layout dove ogni riga può essere suddivisa in un massimo di 12 colonne. Quando creiamo una colonna, dobbiamo decidere quante colonne questa occupa tramite una classe css. Per fare un esempio, se diamo a una colonna la classe col-lg-12, questa occuperà tutta la riga, mentre, se le diamo col-lg-6, questa occuperà solo metà della riga. Questa funzionalità consente di impaginare i contenuti delle nostre applicazioni in modo semplice ed efficace, ma presenta alcuni limiti.
Se vogliamo fare 5 colonne di larghezza uguale che occupano tutta la riga, questo non è possibile.
Bootstrap 4 introduce le classi con larghezza automatica calcolata in base al numero di colonne presenti.
Prendiamo come esempio il seguente codice.
<div class="container"> <div class="row"> <div class="col-lg"> One of three columns </div> <div class="col-lg"> One of three columns </div> <div class="col-lg"> One of three columns </div> <div class="col-lg"> One of three columns </div> <div class="col-lg"> One of three columns </div> </div> </div>
In questo esempio, abbiamo deciso che una riga contiene 5 colonne di a cui non abbiamo impostato il numero di colonne che utilizzano. In questo caso, bootstrap assegna a ogni colonna la dimensione necessaria per renderla uguale alle altre: 20%.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Controllare gli accessi IP alle app con Azure Container Apps
Reactive form tipizzati con FormBuilder in Angular
Ottimizzazione dei block template in Angular 17
Utilizzare gli snapshot con Azure File shares
Eseguire una GroupBy per entity in Entity Framework
Gestire i null nelle reactive form tipizzate di Angular
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Generare token per autenicarsi sulle API di GitHub
Generare file per il download da Blazor WebAssembly
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Gestire liste di tipi semplici con Entity Framework Core