Come rimuovere lo spazio della grondaia per un div specifico in bootstrap

Il sistema Bootstrap Grid è costituito da molti contenitori, righe e colonne per il layout e l'allineamento del contenuto. Il sistema Grid ha definito una riga con 12 colonne virtuali per rendere le pagine Web completamente reattive. Tuttavia, ci sono imbottiture o spazi intorno o tra le colonne. Questi spazi sono noti come "spazi di grondaia".

Questo post discuterà di quali sono gli spazi della grondaia e come possono essere rimossi per un Div specifico in Bootstrap.

Cos'è lo spazio della grondaia in bootstrap?

Le grondaie sono gli spazi o gli spazi tra le colonne prodotte dall'imbottitura orizzontale. Vengono utilizzati per supportare l'allineamento e gli spazi dei contenuti reattivi nel sistema di griglia bootstrap.

L'immagine indicata sotto mostra una riga con un bordo rosso attorno ad essa. All'interno della riga, esistono tre elementi DIV di dimensioni uguali di colonne a griglia uguali. Sebbene le colonne siano uguali, ci sono ancora spazi di grondaia tra di loro:

Come rimuovere lo spazio della grondaia per un div specifico in bootstrap?

In Bootstrap, la classe "no-gnter"Viene utilizzato per eliminare gli spazi di grondaia di qualsiasi div.

Per questo scopo:

• Aggiungere un ""Tag insieme alla classe"Main-Div".
• Quindi, regola una sezione di riga aggiungendo un'altra ""Elemento con la classe"riga". Dato che dobbiamo rimuovere gli spazi dalla riga, specificare una classe "no-gnter"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:

CSS

Nella sezione CSS, le classi menzionate nella pagina HTML sono disegnate con diverse proprietà di styling.

Classe "Main-Div" di stile

.main-div
larghezza: 600px;
Margine: 50px Auto;

IL ".Main-Div"È menzionato per accedere all'elemento Div con classe"Main-Div". Le seguenti proprietà sono applicate a questa classe:

• "larghezza"Definisce la larghezza dell'elemento.
• "margine"Imposta la spaziatura attorno all'elemento.

Classe "riga" di stile

.riga
bordo: 1px rosso solido;

Il bootstrap "riga"La classe viene aggiunta con il"confine" proprietà. Questo avvolgerà la riga della griglia in una larghezza, stile e bordo del colore specificati.

Le tre classi "colonna-1","colonna-2", E "colonna-3"Viene assegnato il CSS"colore di sfondo" E "altezza"Proprietà per renderle prominenti.

Classe "colonna-1" di stile

.colonna-1
Background-color: turchese;
Altezza: 200px;

Classe "colonna 2" di stile

.colonna-2
Background-color: viola;
Altezza: 200px;

Classe "colonna-3" di stile

.colonna-3
Background-color: Yellowgreen;
Altezza: 200px;

Si può osservare che il ""Container con la classe"riga"È stato regolato con successo senza spazio di grondaia tra di loro:

Ti abbiamo insegnato come rimuovere lo spazio della grondaia per un div specifico in bootstrap.

Conclusione

Per rimuovere gli spazi della grondaia per un div specifico, la classe "no-gnter" può essere utilizzata. A tale scopo, aggiungi il ""Elemento insieme al"riga no-grond" classe. Questo post ha fornito una guida completa sugli spazi della grondaia e su come possono essere eliminati per un Div specifico in Bootstrap.