Dit bericht bespreekt wat gootruimten zijn en hoe ze kunnen worden verwijderd voor een specifieke div in Bootstrap.
Wat is gootruimte in Bootstrap?
De goten zijn de ruimtes of openingen tussen de kolommen die worden geproduceerd door horizontale opvulling. Ze worden gebruikt om responsieve contentuitlijning en spaties in het Bootstrap-rastersysteem te ondersteunen.
Onderstaande afbeelding toont een rij met een rode rand eromheen. Binnen de rij bestaan drie div-elementen van gelijke grootte van gelijke rasterkolommen. Hoewel de kolommen gelijk zijn, zijn er nog steeds gootruimten ertussen:
Hoe gootruimte voor een specifieke div in Bootstrap te verwijderen?
In Bootstrap, de klasse ' geen dakgoten ” wordt gebruikt om de gootruimtes van elke div te elimineren.
Voor dit doeleinde:
- Voeg een ... toe ' 'tag mee met de klas' hoofd-div ”.
- Pas vervolgens een rijsectie aan door nog een '
'element met de klasse' rij ”. Aangezien we de spaties uit de rij moeten verwijderen, specificeert u een klasse ' geen dakgoten 'erin.- Om de rasterrij in drie gelijke kolommen te verdelen, gebruikt u de klasse ' col-4 ”.
- Pas binnen de “
”-container van elke kolom de “”-elementen aan met klassen “ kolom-1 ”, “ kolom-2 ', en ' kolom-3 ”, respectievelijk: < div klas = 'main-div' >
< div klas = 'rij zonder dakgoten' >
< div klas = 'col-4 ' >
< div klas = 'kolom-1' >< / div >
< / div >
< div klas = 'col-4' >
< div klas = 'kolom-2' >< / div >
< / div >
< div klas = 'col-4' >
< div klas = 'kolom-3' >< / div >
< / div >
< / div >
< / div >CSS
In de CSS-sectie worden de klassen die op de HTML-pagina worden genoemd, gestyled met verschillende stylingeigenschappen.
Stijl 'main-div' klasse
.main-div {
breedte : 600px;
marge: 50px automatisch;
}De ' .main-div ” wordt genoemd om toegang te krijgen tot het div-element met klasse “ hoofd-div ”. De volgende eigenschappen worden toegepast op deze klasse:
- “ breedte ” definieert de breedte van het element.
- “ marge ” stelt de afstand rond het element in.
Stijl 'rij' klasse
.rij {
grens : 1px effen rood;
}De bootstrap ' rij ” klasse wordt toegevoegd met de “ grens ' eigenschap. Hierdoor wordt de rasterrij omwikkeld met een opgegeven breedte, stijl en kleurrand.
De drie klassen “ kolom-1 ”, “ kolom-2 ', en ' kolom-3 ” krijgen de CSS toegewezen “ Achtergrond kleur ' en ' hoogte ” eigenschappen om ze prominent te maken.
Stijl 'kolom-1' klasse
.kolom- een {
achtergrond- kleur : turkoois;
hoogte : 200px;
}Stijl 'kolom-2' klasse
.kolom- 2 {
achtergrond- kleur : paars;
hoogte : 200 pixels;
}Stijl 'kolom-3' klasse
.kolom- 3 {
achtergrond- kleur : geel groen;
hoogte : 200px;
}Men kan constateren dat de “
” container met de klasse “ rij ” is met succes aangepast zonder gootruimte ertussen:
We hebben je geleerd hoe je gootruimte voor een specifieke div in Bootstrap kunt verwijderen.
Gevolgtrekking
Om tussenruimten voor een specifieke div te verwijderen, de klasse ' geen dakgoten ' kan worden gebruikt. Voeg hiervoor de '
”-element samen met de “ rij zonder dakgoten ' klas. Dit bericht heeft een uitgebreide gids gegeven over gootruimten en hoe deze kunnen worden geëlimineerd voor een specifieke div in Bootstrap. - Pas vervolgens een rijsectie aan door nog een '