Tento príspevok bude diskutovať o tom, čo sú medzery medzi odkvapmi a ako ich možno odstrániť pre konkrétny div v Bootstrape.
Čo je Gutter Space v Bootstrape?
Žľaby sú priestory alebo medzery medzi stĺpmi vytvorené vodorovnou výplňou. Používajú sa na podporu responzívneho zarovnávania obsahu a medzier v systéme mriežky Bootstrap.
Nižšie uvedený obrázok zobrazuje riadok s červeným okrajom. V riadku existujú tri rovnako veľké prvky div v rovnakých stĺpcoch mriežky. Aj keď sú stĺpce rovnaké, stále sú medzi nimi medzery:
Ako odstrániť Gutter Space pre konkrétny div v Bootstrape?
V Bootstrape je trieda „ bez odkvapov ” sa používa na odstránenie odkvapových priestorov akéhokoľvek div.
Pre tento účel:
- Pridaj ' „označte spolu s triedou“ hlavný-div “.
- Potom upravte sekciu riadku pridaním ďalšej „
'prvok s triedou' riadok “. Keďže musíme z riadku odstrániť medzery, zadajte triedu “ bez odkvapov ' vrámci.- Ak chcete rozdeliť riadok mriežky na tri rovnaké stĺpce, použite triedu „ stĺpik-4 “.
- V rámci kontajnera „
“ každého stĺpca upravte prvky „“ triedami „ stĺpec-1 “, “ stĺpec-2 “ a „ stĺpec-3 “, respektíve: < div trieda = 'hlavný div' >
< div trieda = 'rad bez odkvapov' >
< div trieda = 'stĺpec-4' >
< div trieda = 'stĺpec-1' < / div >
< / div >
< div trieda = 'stĺpec-4' >
< div trieda = 'stĺpec-2' < / div >
< / div >
< div trieda = 'stĺpec-4' >
< div trieda = 'stĺpec-3' < / div >
< / div >
< / div >
< / div >CSS
V sekcii CSS sú triedy uvedené na stránke HTML štylizované s niekoľkými vlastnosťami štýlu.
Štýl triedy „main-div“.
.main-div {
šírka : 600px;
okraj: 50px automaticky;
}' .main-div ” sa spomína na prístup k prvku div s triedou “ hlavný-div “. Na túto triedu sa vzťahujú nasledujúce vlastnosti:
- “ šírka “ definuje šírku prvku.
- “ marža ” nastavuje rozostup okolo prvku.
Trieda štýlu „riadok“.
.riadok {
hranica : 1px plná červená;
}Bootstrap“ riadok “trieda sa pridá s „ hranica ' nehnuteľnosť. Tým sa riadok mriežky zalomí do určenej šírky, štýlu a farebného okraja.
Tri triedy' stĺpec-1 “, “ stĺpec-2 “ a „ stĺpec-3 ” sú priradené CSS “ farba pozadia “ a „ výška ” vlastnosti, aby boli výrazné.
Trieda štýlu „stĺpec-1“.
.stĺpec- jeden {
pozadie- farba : tyrkysová;
výška : 200px;
}Trieda štýlu „stĺpec-2“.
.stĺpec- 2 {
pozadie- farba : fialový;
výška : 200px;
}Trieda štýlu „stĺpec-3“.
.stĺpec- 3 {
pozadie- farba : žltá zelená;
výška : 200px;
}Dá sa pozorovať, že „
“kontajner s triedou” riadok “ bol úspešne upravený bez medzery medzi nimi:
Naučili sme vás, ako odstrániť medzeru pre konkrétny div v Bootstrape.
Záver
Ak chcete odstrániť medzery pre konkrétny div, trieda „ bez odkvapov ' môže byť použité. Na tento účel pridajte „
“prvok spolu s “ riadok bez odkvapov ' trieda. Tento príspevok poskytuje komplexného sprievodcu o odkvapových priestoroch a o tom, ako ich možno odstrániť pre konkrétny div v Bootstrape. - Potom upravte sekciu riadku pridaním ďalšej „