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
Miglioramenti nelle performance di Angular 16
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Generare una User Delegation SAS in .NET per Azure Blob Storage
Miglioramenti agli screen reader e al contrasto in Angular
Combinare Container Queries e Media Queries
Estrarre dati randomici da una lista di oggetti in C#
Change tracking e composition in Entity Framework
Generare la software bill of material (SBOM) in GitHub
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Assegnare un valore di default a un parametro di una lambda in C#
Disabilitare automaticamente un workflow di GitHub (parte 2)
Utilizzare DeepSeek R1 con Azure AI