Dette innlegget vil diskutere hva renneplasser er og hvordan de kan fjernes for en spesifikk div i Bootstrap.
Hva er Gutter Space i Bootstrap?
Rennene er mellomrommene eller gapene mellom søylene produsert av horisontal polstring. De brukes til å støtte responsiv innholdsjustering og mellomrom i Bootstrap-rutenettsystemet.
Nedenfor gitt bilde viser en rad med en rød kant rundt. Innenfor raden finnes det tre like store div-elementer med like rutenettkolonner. Selv om søylene er like, er det fortsatt rennemellomrom mellom dem:
Hvordan fjerne takrenneplass for en spesifikk div i Bootstrap?
I Bootstrap, klassen ' ingen renner ” brukes til å eliminere rennerommene til enhver div.
For dette formålet:
- Legg til en ' ' tag sammen med klassen ' hoved-div '.
- Deretter justerer du en raddel ved å legge til en annen '
' element med klassen ' rad '. Siden vi må fjerne mellomrommene fra raden, spesifiser en klasse ' ingen renner ' inne i det.- For å dele rutenettraden i tre like kolonner, bruk klassen ' kol-4 '.
- Innenfor hver kolonnes «
»-beholder justerer du «»-elementene med klassene « kolonne-1 ', ' kolonne-2 ', og ' kolonne-3 ', henholdsvis: < div klasse = 'hoved-div' >
< div klasse = 'renner uten renner' >
< 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-delen er klassene nevnt på HTML-siden stylet med flere stilegenskaper.
Stil 'main-div' klasse
.main-div {
bredde : 600px;
margin: 50px auto;
}« .main-div ' er nevnt for å få tilgang til div-elementet som har klasse ' hoved-div '. Følgende egenskaper brukes på denne klassen:
- ' bredde ' definerer elementets bredde.
- ' margin ” angir avstanden rundt elementet.
Stil 'rad' klasse
.rad {
grense : 1px solid rødt;
}The Bootstrap ' rad '-klassen er lagt til med ' grense ' eiendom. Dette vil vikle rutenettraden i en spesifisert bredde, stil og fargekant.
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- en {
bakgrunn- farge : turkis;
høyde : 200px;
}Stil 'kolonne-2' klasse
.kolonne- 2 {
bakgrunn- farge : fiolett;
høyde : 200px;
}Stil 'kolonne-3' klasse
.kolonne- 3 {
bakgrunn- farge : gul-grønn;
høyde : 200px;
}Det kan observeres at '
' container med klassen ' rad ' har blitt justert uten mellomrom mellom dem:
Vi har lært deg hvordan du fjerner takrenneplass for en spesifikk div i Bootstrap.
Konklusjon
For å fjerne mellomrom for en spesifikk div, klassen ' ingen renner ' kan bli brukt. For dette formålet legger du til '
'-elementet sammen med ' rad uten takrenner ' klasse. Dette innlegget har gitt en omfattende veiledning om takrenneplasser og hvordan de kan elimineres for en spesifikk div i Bootstrap. - Deretter justerer du en raddel ved å legge til en annen '