Hvordan fjerne takrenneplass for en spesifikk div i bootstrap

Bootstrap Grid -systemet består av mange containere, rader og kolonner for layout og innholdsjustering. Gridsystemet satte ut en rad med 12 virtuelle kolonner for å gjøre websider fullt responsive. Imidlertid er det polstring eller mellomrom rundt eller mellom kolonnene. Disse mellomrommene er kjent som “Gutterområder”.

Dette innlegget vil diskutere hva rennerom er og hvordan de kan fjernes for en spesifikk div i Bootstrap.

Hva er takrennplass i bootstrap?

Takrennene er mellomrom eller hull mellom kolonnene produsert ved horisontal polstring. De brukes til å støtte responsiv innholdsjustering og mellomrom i Bootstrap Grid System.

Nedenfor gitt bilde viser en rad med en rød kant rundt seg. Innenfor raden eksisterer det tre likestørrelser med like store rutenettkolonner. Selv om kolonnene er like, er det fremdeles rennerom mellom dem:

Hvordan fjerne takrenneplass for en spesifikk div i bootstrap?

I bootstrap, klassen “Ingen klippere”Brukes til å eliminere rennesteinene til enhver div.

For dette formålet:

• Legg til en "”Tag sammen med klassen”Main-div”.
• Juster deretter en radseksjon ved å legge til en annen "”Element med klassen“rad”. Når vi må fjerne mellomrommene fra raden, kan du spesifisere en klasse "Ingen klippere”Innenfor det.
• For å dele rutenettet i tre like kolonner, bruk klassen “col-4”.
• Innenfor hver kolonnes "" -beholder, juster "" elementene med klasser "Kolonne-1”,“Kolonne-2”, Og“Kolonne-3”, Henholdsvis:

CSS

I CSS -delen er klassene som er nevnt på HTML -siden stylet med flere stylingegenskaper.

Stil “Main-div” -klasse

.Main-div
Bredde: 600px;
Margin: 50px auto;

“.Main-div”Nevnes for å få tilgang til Div -elementet som har klasse”Main-div”. Følgende egenskaper brukes på denne klassen:

• “bredde”Definerer elementets bredde.
• “margin”Setter avstanden rundt elementet.

Stil "rad" -klasse

.rad
Grense: 1px fast rød;

Bootstrap “rad”Klasse er lagt til med“grense”Eiendom. Dette vil pakke rutenettet i en spesifisert bredde, stil og farge kant.

De tre klassene “Kolonne-1”,“Kolonne-2”, Og“Kolonne-3”Er tildelt CSS”bakgrunnsfarge”Og“høyde”Egenskaper for å gjøre dem fremtredende.

Stil “kolonne-1” -klasse

.kolonne-1
bakgrunnsfarge: turkis;
Høyde: 200px;

Stil “Column-2” -klasse

.kolonne-2
Bakgrunnsfarge: fiolett;
Høyde: 200px;

Stil “Column-3” -klasse

.kolonne-3
Bakgrunnsfarge: Yellowgreen;
Høyde: 200px;

Det kan observeres at "”Container med klassen“rad”Har blitt justert med noe rennestein mellom dem:

Vi har lært deg hvordan du fjerner rennesteinen for en spesifikk div i Bootstrap.

Konklusjon

For å fjerne rennerom for en spesifikk div, klassen “Ingen klippere" kan bli brukt. For dette formålet, legg til "”Element sammen med“Rad uten klippere”Klasse. Dette innlegget har gitt en omfattende guide om takrennerom og hvordan de kan elimineres for en spesifikk div i Bootstrap.