Ta objava bo obravnavala, kaj so žlebovi in kako jih je mogoče odstraniti za določen div v Bootstrapu.
Kaj je Gutter Space v Bootstrapu?
Žlebovi so prostori ali vrzeli med stebri, ki nastanejo z vodoravnim oblazinjenjem. Uporabljajo se za podporo odzivne poravnave vsebine in presledkov v mrežnem sistemu Bootstrap.
Spodnja slika prikazuje vrstico z rdečim robom okoli nje. Znotraj vrstice obstajajo trije enako veliki elementi div enakih stolpcev mreže. Čeprav so stolpci enaki, so med njimi še vedno presledki:
Kako odstraniti Gutter Space za določen div v Bootstrapu?
V Bootstrapu je razred ' brez žlebov ” se uporablja za odpravo žlebov katerega koli div.
Za ta namen:
- Dodajte » »označite skupaj z razredom« glavni-div ”.
- Nato prilagodite odsek vrstice tako, da dodate še en '
' element z razredom ' vrstica ”. Ker moramo odstraniti presledke iz vrstice, določite razred ' brez žlebov « znotraj njega.- Če želite vrstico mreže razdeliti na tri enake stolpce, uporabite razred ' col-4 ”.
- Znotraj vsebnika »
« vsakega stolpca prilagodite elemente »« z razredi » stolpec-1 ”, “ stolpec-2 «, in » stolpec-3 «, oziroma: < div razred = 'main-div' >
< div razred = 'vrstica brez žlebov' >
< div razred = 'col-4' >
< div razred = 'stolpec-1' >< / div >
< / div >
< div razred = 'col-4' >
< div razred = 'stolpec-2' >< / div >
< / div >
< div razred = 'col-4' >
< div razred = 'stolpec-3' >< / div >
< / div >
< / div >
< / div >CSS
V razdelku CSS so razredi, omenjeni na strani HTML, oblikovani z več lastnostmi sloga.
Slog 'main-div' razred
.main-div {
premer : 600 slikovnih pik;
rob: 50 slikovnih pik samodejno;
}' .main-div ” je omenjen za dostop do elementa div z razredom ” glavni-div ”. Za ta razred se uporabljajo naslednje lastnosti:
- “ premer ” določa širino elementa.
- “ marža ” nastavi razmik okoli elementa.
Razred sloga 'vrstica'.
.vrstica {
meja : 1px polna rdeča;
}Bootstrap ' vrstica ' je dodan razred z ' meja ” lastnina. To bo ovilo mrežno vrstico v določeno širino, slog in barvno obrobo.
Trije razredi' stolpec-1 ”, “ stolpec-2 «, in » stolpec-3 ' jim je dodeljen CSS ' Barva ozadja « in » višina ” lastnosti, da postanejo vidni.
Razred sloga 'stolpec-1'.
.column- eno {
ozadje- barva : turkizna;
višina : 200 slikovnih pik;
}Razred sloga 'stolpec-2'.
.column- 2 {
ozadje- barva : vijolična;
višina : 200 slikovnih pik;
}Razred sloga 'stolpec-3'.
.column- 3 {
ozadje- barva : rumenozelena;
višina : 200 slikovnih pik;
}Opaziti je mogoče, da je '
' vsebnik z razredom ' vrstica ” je bila uspešno prilagojena brez prostora med njima:
Naučili smo vas, kako odstraniti žlebni prostor za določen div v Bootstrapu.
Zaključek
Če želite odstraniti presledke za določen div, razred ' brez žlebov ' je lahko uporabljen. V ta namen dodajte »
' skupaj z ' vrsta brez žlebov ” razred. Ta objava je zagotovila obsežen vodnik o žlebnih prostorih in o tem, kako jih je mogoče odstraniti za določen div v Bootstrapu. - Nato prilagodite odsek vrstice tako, da dodate še en '