U ovom će se postu raspravljati o tome što su praznine i kako se mogu ukloniti za određeni div u Bootstrapu.
Što je Gutter Space u Bootstrapu?
Žljebovi su razmaci ili razmaci između stupova dobiveni vodoravnom oblogom. Koriste se za podršku responzivnog poravnanja sadržaja i razmaka u Bootstrap grid sustavu.
Donja slika prikazuje red s crvenim rubom oko njega. Unutar retka postoje tri div elementa jednake veličine jednakih stupaca mreže. Iako su stupci jednaki, još uvijek postoje razmaci između njih:
Kako ukloniti olučni prostor za određeni div u Bootstrapu?
U Bootstrapu, klasa ' bez oluka ” koristi se za eliminiranje olučnih prostora bilo koje div.
Za ovu svrhu:
- Dodati ' ” oznaka zajedno s klasom “ glavni-div ”.
- Zatim prilagodite dio retka dodavanjem drugog '
' element s klasom ' red ”. Budući da moramo ukloniti razmake iz reda, navedite klasu ' bez oluka ' unutar.- Da biste podijelili red mreže u tri jednaka stupca, upotrijebite klasu ' stupac-4 ”.
- Unutar spremnika “
” svakog stupca prilagodite elemente “” s klasama “ stupac-1 ”, “ stupac-2 ', i ' stupac-3 “, odnosno: < div razreda = 'glavni-div' >
< div razreda = 'red bez oluka' >
< div razreda = 'col-4' >
< div razreda = 'kolona-1' >< / div >
< / div >
< div razreda = 'col-4' >
< div razreda = 'kolona-2' >< / div >
< / div >
< div razreda = 'col-4' >
< div razreda = 'kolona-3' >< / div >
< / div >
< / div >
< / div >CSS
U odjeljku CSS, klase spomenute na HTML stranici stilizirane su s nekoliko svojstava stila.
Klasa stila “main-div”.
.glavni-div {
širina : 600 px;
margina: 50px auto;
}' .glavni-div ' spominje se za pristup div elementu koji ima klasu ' glavni-div ”. Na ovu klasu primjenjuju se sljedeća svojstva:
- “ širina ” definira širinu elementa.
- “ margina ” postavlja razmak oko elementa.
Klasa stila 'redak'.
.red {
granica : 1px puno crveno;
}Bootstrap ' red ' klasa se dodaje s ' granica ” vlasništvo. Ovo će omotati red mreže u određenu širinu, stil i obrub u boji.
Tri razreda' stupac-1 ”, “ stupac-2 ', i ' stupac-3 ' dodijeljen je CSS ' boja pozadine ' i ' visina ” svojstva kako bi ih učinili istaknutima.
Klasa stila 'stupac-1'.
.stupac- jedan {
pozadina- boja : tirkizna;
visina : 200 px;
}Klasa stila 'stupac-2'.
.stupac- 2 {
pozadina- boja : ljubičasta;
visina : 200 px;
}Klasa stila “stupac-3”.
.stupac- 3 {
pozadina- boja : žutozelena;
visina : 200 px;
}Može se uočiti da je „
' spremnik s klasom ' red ” je uspješno podešen bez razmaka između njih:
Naučili smo vas kako ukloniti olučni prostor za određeni div u Bootstrapu.
Zaključak
Za uklanjanje praznih mjesta za određeni div, klasa ' bez oluka ' može se koristiti. U tu svrhu dodajte '
' zajedno s elementom ' red bez oluka ” razred. Ovaj post je pružio sveobuhvatan vodič o praznim prostorima i kako se oni mogu eliminirati za određeni div u Bootstrapu. - Zatim prilagodite dio retka dodavanjem drugog '