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
Impostare le dimensioni di un oggetto tramite CSS
Utilizzare una sequence per generare numeri sequenziali con Entity Framework Core
Entity Framework Core 6
Eseguire uno scroll all'interno di una pagina Blazor
Le novità di TypeScript 4.3
Utilizzare il proxy del WebServer di Angular per simulare chiamate ad API sullo stesso dominio
Eseguire manualmente una GitHub Action
Associare Application Insights ad una Web App tramite Azure ARM
Ottimizzare il codice JavaScript con i Shorthand Patterns - terza parte
Creare velocemente microservice grazie a minimal API di ASP.NET Core 6
Creare un Azure Storage account tramite ARM
Continuous Deployment tramite GitOps