Det här inlägget kommer att diskutera vad rännstensutrymmen är och hur de kan tas bort för en specifik div i Bootstrap.
Vad är Gutter Space i Bootstrap?
Rännorna är utrymmena eller mellanrummen mellan pelarna som produceras av horisontell stoppning. De används för att stödja responsiv innehållsanpassning och utrymmen i Bootstrap-rutnätssystemet.
Nedan givna bild visar en rad med en röd kant runt den. Inom raden finns tre lika stora div-element med lika stora rutnätskolumner. Även om kolumnerna är lika, finns det fortfarande rännavstånd mellan dem:
Hur tar man bort rännutrymme för en specifik div i Bootstrap?
I Bootstrap, klassen ' inga rännor ” används för att eliminera rännstensutrymmen för alla div.
För det här syftet:
- Lägg till en ' ' tagga tillsammans med klassen ' huvud-div ”.
- Justera sedan en radsektion genom att lägga till en annan '
' element med klassen ' rad ”. Eftersom vi måste ta bort mellanslagen från raden, ange en klass ' inga rännor ' inom det.- För att dela rutnätsraden i tre lika stora kolumner, använd klassen ' kol-4 ”.
- Inom varje kolumns '
'-behållare, justera ''-elementen med klasserna ' kolumn-1 ”, “ kolumn-2 ', och ' kolumn-3 ', respektive: < div klass = 'main-div' >
< div klass = 'rad utan rännor' >
< div klass = 'col-4' >
< div klass = 'kolumn-1' >< / div >
< / div >
< div klass = 'col-4' >
< div klass = 'kolumn-2' >< / div >
< / div >
< div klass = 'col-4' >
< div klass = 'kolumn-3' >< / div >
< / div >
< / div >
< / div >CSS
I CSS-sektionen är klasserna som nämns på HTML-sidan utformade med flera stilegenskaper.
Stil 'main-div' klass
.main-div {
bredd : 600px;
marginal: 50px auto;
}den ' .main-div ” nämns för att komma åt div-elementet med klass ” huvud-div ”. Följande egenskaper tillämpas på denna klass:
- ' bredd ” definierar elementets bredd.
- ' marginal ” ställer in avståndet runt elementet.
Stil 'rad' klass
.rad {
gräns : 1px fast röd;
}The Bootstrap ' rad klass läggs till med ' gräns ' fast egendom. Detta kommer att linda rutnätsraden i en angiven bredd, stil och färgkant.
De tre klasserna ' kolumn-1 ”, “ kolumn-2 ', och ' kolumn-3 ' tilldelas CSS ' bakgrundsfärg ' och ' höjd ” egenskaper för att göra dem framträdande.
Stil 'kolumn-1' klass
.kolumn- ett {
bakgrund- Färg : turkos;
höjd : 200px;
}Stil 'kolumn-2' klass
.kolumn- 2 {
bakgrund- Färg : violett;
höjd : 200px;
}Stil 'kolumn-3' klass
.kolumn- 3 {
bakgrund- Färg : gulgrön;
höjd : 200px;
}Det kan observeras att '
' behållare med klassen ' rad ” har framgångsrikt justerats utan något rännavstånd mellan dem:
Vi har lärt dig hur du tar bort ränna utrymme för en specifik div i Bootstrap.
Slutsats
För att ta bort rännstensutrymmen för en specifik div, klassen ' inga rännor ' kan användas. För detta ändamål, lägg till '
' element tillsammans med ' rad utan rännor ' klass. Det här inlägget har gett en omfattande guide om rännstensutrymmen och hur de kan elimineras för en specifik div i Bootstrap. - Justera sedan en radsektion genom att lägga till en annan '