Tässä viestissä keskustellaan siitä, mitä kouruvälit ovat ja kuinka ne voidaan poistaa tietyltä Bootstrapin divltä.
Mikä on Gutter Space Bootstrapissa?
Kourut ovat pylväiden välisiä tiloja tai rakoja, jotka on valmistettu vaakatasoisella pehmusteella. Niitä käytetään tukemaan reagoivaa sisällön kohdistusta ja välilyöntejä Bootstrap-ruudukkojärjestelmässä.
Alla olevassa kuvassa on rivi, jonka ympärillä on punainen reunus. Rivillä on kolme samankokoista div-elementtiä, jotka ovat yhtä suuria ruudukon sarakkeita. Vaikka pylväät ovat yhtä suuret, niiden välissä on silti kourutilaa:
Kuinka poistaa Gutter Space tietylle divlle Bootstrapissa?
Bootstrapissa luokka ' ei-kourut ” käytetään poistamaan minkä tahansa div.
Tähän tarkoitukseen:
- Lisää ' 'tunniste luokan kanssa' main-div ”.
- Säädä sitten riviosaa lisäämällä toinen '
' elementti luokalla ' rivi ”. Koska meidän on poistettava välilyönnit riviltä, määritä luokka ' ei-kourut ' sen sisällä.- Jos haluat jakaa ruudukon kolmeen yhtä suureen sarakkeeseen, käytä luokkaa ' sarake-4 ”.
- Säädä kunkin sarakkeen '
' -säilön '' -elementtejä luokilla ' sarake-1 ”, “ sarake-2 ”, ja ” sarake-3 ”, vastaavasti: < div luokkaa = 'main-div' >
< div luokkaa = 'riuta ilman kourut' >
< div luokkaa = 'col-4' >
< div luokkaa = 'sarake-1' >< / div >
< / div >
< div luokkaa = 'sarake-4' >
< div luokkaa = 'sarake-2' >< / div >
< / div >
< div luokkaa = 'sarake-4' >
< div luokkaa = 'sarake-3' >< / div >
< / div >
< / div >
< / div >CSS
CSS-osiossa HTML-sivulla mainitut luokat on tyylitelty useilla tyyliominaisuuksilla.
Tyyli 'main-div' luokka
.main-div {
leveys : 600px;
marginaali: 50px auto;
}' .main-div ' mainitaan päästäkseen div-elementtiin, jolla on luokka ' main-div ”. Tässä luokassa käytetään seuraavia ominaisuuksia:
- ' leveys ” määrittää elementin leveyden.
- ' marginaali ” määrittää elementin ympärillä olevan välin.
Tyyli 'rivi' luokka
.rivi {
rajaa : 1px tasainen punainen;
}Bootstrap' rivi ' luokka on lisätty ' rajaa ” omaisuutta. Tämä kääriä ruudukon rivin tietylle leveydelle, tyylille ja värille.
Kolme luokkaa' sarake-1 ”, “ sarake-2 ”, ja ” sarake-3 ' on määritetty CSS' taustaväri ' ja ' korkeus '-ominaisuuksia tehdäkseen niistä näkyvämpiä.
Tyyli 'sarake-1' luokka
.column- yksi {
tausta- väri- : turkoosi;
korkeus : 200px;
}Tyyli 'sarake-2' luokka
.column- 2 {
tausta- väri- : violetti;
korkeus : 200px;
}Tyyli 'sarake-3' luokka
.column- 3 {
tausta- väri- : keltavihreä;
korkeus : 200px;
}Voidaan havaita, että '
'kontti luokan kanssa' rivi ” on säädetty onnistuneesti ilman kourutilaa niiden välissä:
Olemme opettaneet sinulle kuinka poistaa kourutila tietyltä divltä Bootstrapissa.
Johtopäätös
Jos haluat poistaa kouruvälit tietystä divistä, luokka ' ei-kourut ' voidaan käyttää. Lisää tätä tarkoitusta varten '
' elementti yhdessä ' rivi ei-kourut ”luokka. Tämä viesti on tarjonnut kattavan oppaan kourutiloista ja siitä, kuinka ne voidaan poistaa tietyn Bootstrapin divin osalta. - Säädä sitten riviosaa lisäämällä toinen '