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
Utilizzare i Workspace con NPM 7
Indicizzare Cosmos DB con Azure Search
Creare un interceptor per ottimizzare il codice SQL generato da Entity Framework Core
Testare le impostazioni CORS di un'applicazione ASP.NET Core
Tracciare il body delle richieste fallite con Application Insights in .NET Core
Creare un componente Button in Blazor per operazioni asincrone
Creare un templated component per Blazor
Restituire il correlation ID in caso di errore in ASP.NET Core Web API
Welcome to #GlobalAzure
Progressive Web Apps with Angular
Autenticazione condizionale a due fattori con Azure Active Directory B2C
PWAConf 2020
I più letti di oggi
- Creare un web server locale con LiveReload
- Operatori di confronto in JavaScript: == e ===
- Microsoft WebCamp - Roma, Milano
- Dev Night #2: Serverless - Milano
- Disponibile la release finale di Moonlight 1.0
- Lancio ufficiale di Moonlight 1.0
- Disponibile il Silverlight Toolkit March 2009 Release
- MonoTouch in versione 1.0: C# per iPhone diventa realtà