W tym poście omówimy, czym są przestrzenie rynnowe i jak można je usunąć dla określonego elementu div w Bootstrap.
Co to jest Gutter Space w Bootstrap?
Rynny to przestrzenie lub szczeliny między kolumnami utworzone przez poziome wypełnienie. Służą do obsługi responsywnego wyrównania treści i spacji w systemie siatki Bootstrap.
Poniżej podany obraz przedstawia rząd otoczony czerwoną obwódką. W wierszu znajdują się trzy równej wielkości elementy div o równych kolumnach siatki. Chociaż słupy są równe, między nimi nadal występują odstępy między rynnami:
Jak usunąć miejsce na rynnę dla określonego elementu div w Bootstrap?
W Bootstrap klasa „ bez rynien ” służy do wyeliminowania przestrzeni rynnowych dowolnego elementu div.
w tym celu:
- Dodać '
”oznacz wraz z klasą” dział główny ”. - Następnie dostosuj sekcję wiersza, dodając kolejną „
”element z klasą” wiersz ”. Ponieważ musimy usunąć spacje z wiersza, określ klasę „ bez rynien ” w nim. - Aby podzielić wiersz siatki na trzy równe kolumny, użyj klasy „ kol-4 ”.
- W kontenerze „” każdej kolumny dostosuj elementy „” za pomocą klas „ kolumna-1 ”, „ kolumna-2 ', oraz ' kolumna-3 ”, odpowiednio: < dz klasa = „główny dział” >
< dz klasa = „rzędy bez rynien” >
< dz klasa = 'kolumna-4' >
< dz klasa = „kolumna-1” >< / dz >
< / dz >
< dz klasa = „kolumna-4” >
< dz klasa = „kolumna-2” >< / dz >
< / dz >
< dz klasa = „kolumna-4” >
< dz klasa = „kolumna-3” >< / dz >
< / dz >
< / dz >
< / dz >CSS
W sekcji CSS klasy wymienione na stronie HTML są stylizowane za pomocą kilku właściwości stylizacyjnych.
Stylizacja klasy „main-div”.
.główny dział {
szerokość : 600 pikseli;
margines: automatyczny 50px;
}„ .główny dział ” jest wymienione, aby uzyskać dostęp do elementu div mającego klasę „ dział główny ”. Do tej klasy stosowane są następujące właściwości:
- “ szerokość ” określa szerokość elementu.
- “ margines ” ustawia odstępy wokół elementu.
Klasa stylu „wiersz”.
.wiersz {
granica : 1 px jednolita czerwień;
}Bootstrap „ wiersz ” dodaje się klasę z „ granica ' własność. Spowoduje to zawinięcie wiersza siatki w obramowanie o określonej szerokości, stylu i kolorze.
Trzy klasy” kolumna-1 ”, „ kolumna-2 ', oraz ' kolumna-3 ” mają przypisany kod CSS „ kolor tła ' oraz ' Wysokość ”, aby były widoczne.
Klasa stylu „kolumna-1”.
.kolumna- jeden {
tło- kolor : turkusowy;
Wysokość : 200 pikseli;
}Klasa stylu „kolumna-2”.
.kolumna- 2 {
tło- kolor : fioletowy;
Wysokość : 200 pikseli;
}Klasa stylu „kolumna-3”.
.kolumna- 3 {
tło- kolor : żółty zielony;
Wysokość : 200 pikseli;
}Można zauważyć, że „
”kontener z klasą” wiersz ” został pomyślnie dostosowany bez odstępu między rynnami: 
Nauczyliśmy Cię, jak usunąć miejsce na rynnę dla określonego elementu div w Bootstrap.
Wniosek
Aby usunąć odstępy między rynnami dla określonego elementu div, klasa „ bez rynien ' może być zastosowane. W tym celu należy dodać „
” element wraz z „ rząd bez rynien ' klasa. Ten post zawiera obszerny przewodnik po przestrzeniach rynnowych i sposobach ich eliminacji dla określonego elementu div w Bootstrap.