Dette indlæg vil diskutere, hvad tagrende spaces er, og hvordan de kan fjernes for en specifik div i Bootstrap.
Hvad er Gutter Space i Bootstrap?
Tagrenderne er mellemrummene eller mellemrummene mellem søjlerne fremstillet ved vandret polstring. De bruges til at understøtte responsiv indholdsjustering og mellemrum i Bootstrap-gittersystemet.
Nedenstående billede viser en række med en rød kant omkring. Inden for rækken findes tre lige store div-elementer med lige store gitterkolonner. Selvom søjlerne er lige store, er der stadig rendemellemrum mellem dem:
Hvordan fjerner man tagrendeplads til en specifik div i Bootstrap?
I Bootstrap er klassen ' ingen tagrender ” bruges til at eliminere rendestenene i enhver div.
Til dette formål:
- Tilføj en ' ' tag sammen med klassen ' hoved-div ”.
- Juster derefter en rækkesektion ved at tilføje en anden '
' element med klassen ' række ”. Da vi skal fjerne mellemrummene fra rækken, angiv en klasse ' ingen tagrender 'inde i det.- For at opdele gitterrækken i tre lige store kolonner skal du bruge klassen ' col-4 ”.
- Inden for hver kolonnes '
'-beholder skal du justere ''-elementerne med klasserne ' kolonne-1 ', ' kolonne-2 ', og ' kolonne-3 ', henholdsvis: < div klasse = 'hoved-div' >
< div klasse = 'rækkefrie tagrender' >
< div klasse = 'col-4' >
< div klasse = 'kolonne-1' >< / div >
< / div >
< div klasse = 'col-4' >
< div klasse = 'kolonne-2' >< / div >
< / div >
< div klasse = 'col-4' >
< div klasse = 'kolonne-3' >< / div >
< / div >
< / div >
< / div >CSS
I CSS-sektionen er klasserne nævnt på HTML-siden stylet med flere stilegenskaber.
Stil 'main-div' klasse
.main-div {
bredde : 600px;
margin: 50px auto;
}Det ' .main-div ' nævnes for at få adgang til div-elementet med klasse ' hoved-div ”. Følgende egenskaber anvendes på denne klasse:
- “ bredde ” definerer elementets bredde.
- “ margen ” indstiller afstanden omkring elementet.
Stil 'række' klasse
.række {
grænse : 1px fast rød;
}Bootstrap' række ' klasse tilføjes med ' grænse ” ejendom. Dette vil indpakke gitterrækken i en specificeret bredde, stil og farvekant.
De tre klasser' kolonne-1 ', ' kolonne-2 ', og ' kolonne-3 ' er tildelt CSS ' baggrundsfarve ' og ' højde ” egenskaber for at gøre dem fremtrædende.
Stil 'kolonne-1' klasse
.kolonne- en {
baggrund- farve : turkis;
højde : 200px;
}Stil 'kolonne-2' klasse
.kolonne- 2 {
baggrund- farve : violet;
højde : 200px;
}Stil 'kolonne-3' klasse
.kolonne- 3 {
baggrund- farve : gul grøn;
højde : 200px;
}Det kan konstateres, at '
' container med klassen ' række ” er blevet justeret uden rendemellemrum mellem dem:
Vi har lært dig, hvordan du fjerner tagrendeplads for en specifik div i Bootstrap.
Konklusion
For at fjerne rendemellemrum for en specifik div, skal klassen ' ingen tagrender ' Kan bruges. Til dette formål tilføjes '
'-elementet sammen med ' række uden tagrender ' klasse. Dette indlæg har givet en omfattende guide til tagrender og hvordan de kan elimineres for en specifik div i Bootstrap. - Juster derefter en rækkesektion ved at tilføje en anden '