Tatalakayin ng post na ito kung ano ang mga puwang ng gutter at kung paano ito maaalis para sa isang partikular na div sa Bootstrap.
Ano ang Gutter Space sa Bootstrap?
Ang mga gutter ay ang mga puwang o puwang sa pagitan ng mga haligi na ginawa ng pahalang na padding. Ginagamit ang mga ito upang suportahan ang tumutugon na pagkakahanay ng nilalaman at mga puwang sa sistema ng grid ng Bootstrap.
Ang ibinigay na larawan sa ibaba ay nagpapakita ng isang hilera na may pulang hangganan sa paligid nito. Sa loob ng row, mayroong tatlong equal-sized na div na elemento ng magkaparehong grid column. Bagama't pantay ang mga column, may mga gutter space pa rin sa pagitan nila:
Paano Mag-alis ng Gutter Space para sa isang Tukoy na div sa Bootstrap?
Sa Bootstrap, ang klase ' walang-gutters ” ay ginagamit upang alisin ang mga gutter space ng anumang div.
Para sa layuning ito:
- Magdagdag ng ' 'tag kasama ng klase' pangunahing-div ”.
- Pagkatapos, ayusin ang isang seksyon ng row sa pamamagitan ng pagdaragdag ng isa pang '
'elemento na may klase' hilera ”. Dahil kailangan nating alisin ang mga puwang mula sa hilera, tukuyin ang isang klase ' walang-gutters ” sa loob nito.- Para hatiin ang grid row sa tatlong pantay na column, gamitin ang class na ' col-4 ”.
- Sa loob ng lalagyan ng '
' ng bawat column, ayusin ang mga elementong '' na may mga klase na ' hanay-1 ”, “ hanay-2 ”, at “ hanay-3 ”, ayon sa pagkakabanggit: < div klase = 'main-div' >
< div klase = 'hilera walang-gutters' >
< div klase = 'col-4' >
< div klase = 'column-1' >< / div >
< / div >
< div klase = 'col-4' >
< div klase = 'column-2' >< / div >
< / div >
< div klase = 'col-4' >
< div klase = 'kolumna-3' >< / div >
< / div >
< / div >
< / div >CSS
Sa seksyong CSS, ang mga klase na binanggit sa HTML na pahina ay naka-istilo na may ilang mga katangian ng pag-istilo.
Istilo ang 'main-div' na klase
.pangunahing-div {
lapad : 600px;
margin: 50px auto;
}Ang ' .pangunahing-div ' ay binanggit upang ma-access ang div element na may klase ' pangunahing-div ”. Ang mga sumusunod na katangian ay inilapat sa klase na ito:
- “ lapad ” ay tumutukoy sa lapad ng elemento.
- “ margin ” nagtatakda ng puwang sa paligid ng elemento.
Istilo ang klase ng 'row'.
.hilera {
hangganan : 1px solid na pula;
}Ang Bootstrap ' hilera 'Ang klase ay idinagdag sa ' hangganan ” ari-arian. Ibabalot nito ang grid row sa isang tinukoy na lapad, istilo, at hangganan ng kulay.
Tatlong klase' hanay-1 ”, “ hanay-2 ”, at “ hanay-3 ' ay itinalaga ang CSS ' kulay ng background 'at' taas ” mga ari-arian para maging prominente sila.
Istilo ang klase ng 'column-1'.
.column- isa {
background- kulay : turkesa;
taas : 200px;
}Istilo ang klase ng 'column-2'.
.column- 2 {
background- kulay : violet;
taas : 200px;
}Istilo ang klase ng 'column-3'.
.column- 3 {
background- kulay : yellowgreen;
taas : 200px;
}Mapapansin na ang '
'lalagyan na may klase' hilera ” ay matagumpay na naayos nang walang gutter space sa pagitan nila:
Itinuro namin sa iyo kung paano mag-alis ng gutter space para sa isang partikular na div sa Bootstrap.
Konklusyon
Upang alisin ang mga puwang ng kanal para sa isang partikular na div, ang klase ' walang-gutters ” maaaring gamitin. Para sa layuning ito, idagdag ang '
'elemento kasama ang' row no-gutters ” klase. Ang post na ito ay nagbigay ng komprehensibong gabay sa mga gutter space at kung paano sila maaalis para sa isang partikular na div sa Bootstrap. - Pagkatapos, ayusin ang isang seksyon ng row sa pamamagitan ng pagdaragdag ng isa pang '