Questo post discuterà cosa sono gli spazi di rilegatura e come possono essere rimossi per un div specifico in Bootstrap.
Che cos'è lo spazio di rilegatura in Bootstrap?
Le grondaie sono gli spazi o gli spazi tra le colonne prodotti da tamponamenti orizzontali. Vengono utilizzati per supportare l'allineamento del contenuto reattivo e gli spazi nel sistema a griglia Bootstrap.
Sotto l'immagine data mostra una riga con un bordo rosso attorno ad essa. All'interno della riga esistono tre elementi div di dimensioni uguali di colonne della griglia uguali. Sebbene le colonne siano uguali, ci sono ancora spazi di grondaia tra di loro:
Come rimuovere lo spazio di rilegatura per un div specifico in Bootstrap?
In Bootstrap, la classe ' senza grondaie ” viene utilizzato per eliminare gli spazi di grondaia di qualsiasi div.
Per questo scopo:
- Aggiungere un ' ” taggare insieme alla classe “ div-principale ”.
- Quindi, modifica una sezione di riga aggiungendo un altro '
” elemento con la classe “ riga ”. Poiché dobbiamo rimuovere gli spazi dalla riga, specifica una classe ' senza grondaie ” al suo interno.- Per dividere la riga della griglia in tre colonne uguali, utilizzare la classe ' col-4 ”.
- All'interno del contenitore '
' di ogni colonna, regola gli elementi '' con le classi ' colonna-1 ”, “ colonna-2 ', e ' colonna-3 ”, rispettivamente: < div classe = 'div-principale' >
< div classe = 'fila senza grondaie' >
< div classe = 'col-4' >
< div classe = 'colonna-1' >< / div >
< / div >
< div classe = 'col-4' >
< div classe = 'colonna-2' >< / div >
< / div >
< div classe = 'col-4' >
< div classe = 'colonna-3' >< / div >
< / div >
< / div >
< / div >CSS
Nella sezione CSS, le classi menzionate nella pagina HTML sono stilizzate con diverse proprietà di stile.
Classe 'main-div' di stile
.main-div {
larghezza : 600px;
margine: 50px automatico;
}Il ' .main-div 'è menzionato per accedere all'elemento div con classe' div-principale ”. Le seguenti proprietà vengono applicate a questa classe:
- “ larghezza ” definisce la larghezza dell'elemento.
- “ margine ” imposta la spaziatura attorno all'elemento.
Classe di stile 'riga'.
.riga {
confine : 1px rosso fisso;
}Lo Stivaletto” riga ” la classe viene aggiunta con il “ confine ' proprietà. Questo avvolgerà la riga della griglia in una larghezza, uno stile e un bordo di colore specificati.
Le tre classi” colonna-1 ”, “ colonna-2 ', e ' colonna-3 ” vengono assegnati i CSS “ colore di sfondo ' e ' altezza ” proprietà per renderli prominenti.
Stile classe 'colonna-1'.
.colonna- uno {
sfondo- colore : turchese;
altezza : 200px;
}Stile classe 'colonna-2'.
.colonna- 2 {
sfondo- colore : Viola;
altezza : 200px;
}Classe di stile 'colonna-3'.
.colonna- 3 {
sfondo- colore : giallo verde;
altezza : 200px;
}Si può osservare che il “
” contenitore con la classe “ riga ' è stato regolato con successo senza spazio di grondaia tra di loro:
Ti abbiamo insegnato come rimuovere lo spazio di rilegatura per un div specifico in Bootstrap.
Conclusione
Per rimuovere gli spazi di rilegatura per un div specifico, la classe ' senza grondaie ' può essere utilizzato. A tale scopo, aggiungi '
” insieme all'elemento “ fila senza grondaie ' classe. Questo post ha fornito una guida completa sugli spazi di rilegatura e su come possono essere eliminati per uno specifico div in Bootstrap. - Quindi, modifica una sezione di riga aggiungendo un altro '