Tento příspěvek pojednává o tom, co jsou mezery mezi okapy a jak je lze odstranit pro konkrétní div v Bootstrapu.
Co je Gutter Space v Bootstrapu?
Žlaby jsou prostory nebo mezery mezi sloupy vytvořené vodorovným polstrováním. Používají se k podpoře responzivního zarovnání obsahu a mezer v systému mřížky Bootstrap.
Níže uvedený obrázek ukazuje řádek s červeným okrajem. V rámci řádku existují tři stejně velké prvky div se stejnými sloupci mřížky. Přestože jsou sloupce stejné, stále jsou mezi nimi mezery:
Jak odstranit Gutter Space pro konkrétní div v Bootstrapu?
V Bootstrapu je třída „ žádné okapy ” se používá k eliminaci okapových mezer jakéhokoli div.
Pro tento účel:
- Přidat ' „označit spolu s třídou“ hlavní-div “.
- Poté upravte sekci řádku přidáním dalšího „
'prvek s třídou' řádek “. Protože musíme z řádku odstranit mezery, zadejte třídu “ žádné okapy “ v něm.- Chcete-li rozdělit řádek mřížky na tři stejné sloupce, použijte třídu „ sloupek-4 “.
- V kontejneru „
“ každého sloupce upravte prvky „“ pomocí tříd „ sloupec-1 “, “ sloupec-2 ', a ' sloupec-3 “, respektive: < div třída = 'hlavní div' >
< div třída = 'řada bez okapů' >
< div třída = 'sloupec-4' >
< div třída = 'sloupec-1' < / div >
< / div >
< div třída = 'col-4' >
< div třída = 'sloupec-2' < / div >
< / div >
< div třída = 'col-4' >
< div třída = 'sloupec-3' < / div >
< / div >
< / div >
< / div >CSS
V sekci CSS mají třídy uvedené na stránce HTML styl s několika vlastnostmi stylu.
Styl třídy „main-div“.
.main-div {
šířka : 600px;
okraj: 50px auto;
}' .main-div ” je zmíněno pro přístup k prvku div s třídou “ hlavní-div “. Na tuto třídu jsou aplikovány následující vlastnosti:
- “ šířka “ definuje šířku prvku.
- “ okraj ” nastavuje vzdálenost kolem prvku.
Styl třídy „řádek“.
.řádek {
okraj : 1px plná červená;
}Bootstrap' řádek „třída se přidá s „ okraj ' vlastnictví. Tím se zalomí řádek mřížky v určené šířce, stylu a barevném ohraničení.
Tři třídy' sloupec-1 “, “ sloupec-2 ', a ' sloupec-3 ” jsou přiřazeny CSS “ barva pozadí ' a ' výška ” vlastnosti, aby byly výrazné.
Styl třídy „sloupec-1“.
.sloupec- jeden {
Pozadí- barva : tyrkysová;
výška : 200px;
}Styl třídy „sloupec-2“.
.sloupec- 2 {
Pozadí- barva : fialový;
výška : 200px;
}Styl třídy „sloupec-3“.
.sloupec- 3 {
Pozadí- barva : žluto zelená;
výška : 200px;
}Lze pozorovat, že „
'kontejner s třídou' řádek “ byla úspěšně upravena bez mezery mezi nimi:
Naučili jsme vás, jak odstranit mezeru mezi mezerami pro konkrétní div v Bootstrapu.
Závěr
Chcete-li odstranit mezery mezi mezerami pro konkrétní div, třída „ žádné okapy ' může být použito. Za tímto účelem přidejte „
'prvek spolu s ' řada bez okapů “třída. Tento příspěvek poskytuje komplexního průvodce o okapových prostorech a o tom, jak je lze odstranit pro konkrétní div v Bootstrapu. - Poté upravte sekci řádku přidáním dalšího „