Jak usunąć przestrzeń rynny dla określonego div w bootstrapie

System siatki bootstrap składa się z wielu kontenerów, wierszy i kolumn do układu i wyrównania treści. System siatki określa wiersz o 12 wirtualnych kolumnach, aby strony internetowe były w pełni responsywne. Istnieje jednak wyściółka lub przestrzenie wokół lub między kolumnami. Te przestrzenie są znane jako „Przestrzenie rynny".

W tym poście omówi się, czym są przestrzenie rynny i jak można je usunąć dla konkretnej div w bootstrapie.

Co to jest przestrzeń rynny w bootstrapie?

Rynny to przestrzenie lub szczeliny między kolumnami wytwarzanymi przez poziome wyściółki. Służą do obsługi responsywnego wyrównania treści i przestrzeni w systemie siatki bootstrap.

Poniżej podany obraz pokazuje rząd z czerwoną granicą wokół niego. W rzędu istnieją trzy elementy div o równych kolumnach siatki. Chociaż kolumny są równe, nadal istnieją między nimi przestrzenie rynny:

Jak usunąć przestrzeń rynny dla określonego div w bootstrapie?

W bootstrap klasa „Bez-bratów”Jest wykorzystywany do wyeliminowania przestrzeni rynny dowolnego div.

W tym celu:

• Dodać "„Tag wraz z klasą”Main-Div".
• Następnie dostosuj sekcję wiersza, dodając kolejne „„Element z klasą”wiersz". Ponieważ musimy usunąć przestrzenie z rzędu, określ klasę „Bez-bratów„W nim.
• Aby podzielić wiersz siatki na trzy równe kolumny, skorzystaj z klasy „Col-4".
• W pojemniku „” każdej kolumny dostosuj elementy „” za pomocą klas ”Kolumna 1”,„Kolumna-2", I "Kolumna-3”Odpowiednio:

CSS

W sekcji CSS klasy wymienione na stronie HTML są zaprojektowane z kilkoma właściwościami stylizacji.

Style „Main-Div” klasa

.Main-Div
szerokość: 600px;
Margines: 50px Auto;

„„.Main-Div”Wspomniany jest, aby uzyskać dostęp do elementu DIV z klasą„Main-Div". Do tej klasy stosuje się następujące właściwości:

• "szerokość„Definiuje szerokość elementu.
• "margines”Ustawia odstępy wokół elementu.

Style „Row” klasa

.wiersz
granica: 1px stały czerwony;

Bootstrap „wiersz”Klasa jest dodawana z„granica" nieruchomość. To zawiną rzędu siatki w określonej szerokości, stylu i kolorach.

Trzy klasy „Kolumna 1”,„Kolumna-2", I "Kolumna-3”Przypisane są CSS”kolor tła" I "wysokość„Właściwości, aby uczynić je widocznym.

Stylowa klasa „kolumna 1”

.Kolumna 1
kolor tła: turkus;
Wysokość: 200px;

Stylowa klasa „kolumna-2”

.Kolumna 2
kolor tła: fiolet;
Wysokość: 200px;

Stylowa klasa „kolumna-3”

.kolumna-3
kolor tła: Yellowgreen;
Wysokość: 200px;

Można zauważyć, że „„Pojemnik z klasą”wiersz”Został pomyślnie dostosowany bez przestrzeni rynny między nimi:

Nauczyliśmy cię, jak usunąć przestrzeń rynny dla określonego div w bootstrapie.

Wniosek

Aby usunąć przestrzenie rynny dla konkretnej div, klasa „Bez-bratów" może być użyte. W tym celu dodaj „”Element wraz z„Row bez-głównych" klasa. Ten post dostarczył kompleksowego przewodnika na temat przestrzeni rynny i sposób, w jaki można je wyeliminować dla konkretnej div w bootstrapie.