Selles postituses arutatakse, mis on vihmaveerennid ja kuidas neid Bootstrapi konkreetse div jaoks eemaldada.
Mis on Bootstrapis Gutter Space?
Vihmaveerennid on sammastevahelised ruumid või vahed, mis on tekitatud horisontaalse polsterduse abil. Neid kasutatakse tundliku sisu joondamise ja tühikute toetamiseks Bootstrapi ruudustikusüsteemis.
Antud pildi all on kujutatud punase äärisega rida. Reas on kolm võrdse suurusega ruudustiku veergude võrdse suurusega elementi. Kuigi veerud on võrdsed, on nende vahel siiski rennivahed:
Kuidas eemaldada Bootstrapis konkreetse div jaoks renniruumi?
Bootstrapis on klass ' vihmaveerennid ” kasutatakse mis tahes div rennivahede kõrvaldamiseks.
Selleks otstarbeks:
- Lisa ' ' silt koos klassiga ' main-div ”.
- Seejärel kohandage reaosa, lisades teise '
' element klassiga ' rida ”. Kuna peame realt tühikud eemaldama, määrake klass ' vihmaveerennid ” selle sees.- Ruudustiku rea jagamiseks kolmeks võrdseks veerguks kasutage klassi ' kol-4 ”.
- Kohandage iga veeru konteineris „
” elemente „” klassidega „ veerg-1 ”, “ veerg-2 ”, ja „ veerg-3 ”, vastavalt: < div klass = 'main-div' >
< div klass = 'sõudeta vihmaveerennid' >
< div klass = 'kolonn-4' >
< div klass = 'veerg-1' >< / div >
< / div >
< div klass = 'veerg-4' >
< div klass = 'veerg-2' >< / div >
< / div >
< div klass = 'veerg-4' >
< div klass = 'veerg-3' >< / div >
< / div >
< / div >
< / div >CSS
CSS-i jaotises on HTML-lehel mainitud klassid kujundatud mitme stiiliomadusega.
Stiilis “main-div” klass
.main-div {
laius : 600 pikslit;
veeris: 50px auto;
}' .main-div ' mainitakse juurdepääsuks div elemendile, millel on klass ' main-div ”. Sellele klassile rakendatakse järgmisi omadusi:
- “ laius ” määrab elemendi laiuse.
- “ marginaal ” määrab elemendi ümber oleva vahekauguse.
Stiili 'rida' klass
.rida {
piir : 1px ühtlane punane;
}Bootstrap' rida ' klass lisatakse ' piir ” vara. See mähib ruudustikurea määratud laiuse, stiili ja värviga piiridesse.
Kolm klassi' veerg-1 ”, “ veerg-2 ”, ja „ veerg-3 ' on määratud CSS' taustavärv ” ja „ kõrgus ” omadused, et need silmapaistvaks muuta.
Stiili “veerg-1” klass
.veerg- üks {
taust- värvi : türkiissinine;
kõrgus : 200 pikslit;
}Stiili “veerg-2” klass
.veerg- 2 {
taust- värvi : violetne;
kõrgus : 200 pikslit;
}Stiili 'veerg-3' klass
.veerg- 3 {
taust- värvi : kollane roheline;
kõrgus : 200 pikslit;
}Võib täheldada, et '
' konteiner klassiga ' rida ” on edukalt reguleeritud, ilma et nende vahel oleks rennivahet:
Oleme teile õpetanud, kuidas eemaldada Bootstrapis konkreetse div jaoks renniruumi.
Järeldus
Konkreetse divisjoni renniruumide eemaldamiseks klass ' vihmaveerennid ” saab kasutada. Selleks lisage '
' element koos ' rida ilma vihmaveerennid ” klass. See postitus on andnud põhjaliku juhendi vihmaveerennide ruumide kohta ja selle kohta, kuidas neid Bootstrapi konkreetse div puhul kõrvaldada. - Seejärel kohandage reaosa, lisades teise '