Jaka jest klasa pojemnika po kontenerze bootstrap?

Framework CSS znany jako Bootstrap oferuje szeroką gamę predefiniowanych klas. Te klasy są wykorzystywane do szybkiego projektowania dowolnej aplikacji internetowej. Mówiąc dokładniej, zajęcia kontenerów są jedną z nich. Bootstrap oferuje trzy rodzaje klas kontenerów. To są "Pojemnik-płyn”,„pojemnik", I "Container- Breakpoint". Te klasy kontenerów zawierają, wyrównuj środkowe i wybijają zawartość i sprawiają, że komponent reaguje.

Ten zapis opisuje klasę pojemnika po kontenerze bootstrap.

Jaka jest klasa „pojemnik” bootstrap?

„„Pojemnik-płyn„Klasa w bootstrap jest wykorzystywana do zapewnienia pojemnika na pełną szeroką. Ma następujące predefiniowane właściwości CSS:

.kontener-fluid
szerokość: 100%;
PRAWADY: 15px;
Padding-Left: 15px;
margines-prawy: auto;
margines-lew: auto;

Wyjaśnienie wyżej wymienionych właściwości CSS opisano poniżej:

• "szerokość„Własność ma wartość„100%„Co wskazuje, że elementy będą miały pełną szerokość.
• "Prawa wyściółka„Własność jest ustawiona o wartości„15px”, Który dodaje trochę miejsca po prawej stronie zawartości elementu.
• "Padding-Left”Jest ustawiony z wartością„15px”I dodaje przestrzeń po lewej stronie zawartości elementu.
• "margines-prawy" I "margines lewic„Właściwości są ustawione o wartości”automatyczny”, Który dostosowuje element w środku.

Jak używać klasy „pojemnik”?

Wdrożyćmy następujące przykłady, aby zobaczyć, jak „Pojemnik-płyn„Klasa wpływa na układ paska nawigacyjnego bootstrap:

• Navbar bez „Pojemnik-płyn" Klasa
• Navbar z „Pojemnik-płyn" Klasa

PRZYKŁAD 1: NAVBAR bez klas „pojemników”
Utwórzmy pasek nawigacyjny, wykonując kroki:

• Najpierw dodaj „
• W środku "
• Następnie dodaj „„Element z klasą”Navbar-Toggler". Dodaj "Data-toggle" I "cel”Atrybuty, a następnie dołącz ikonę przełącznika w„”Tag.
• „„cel„Atrybut ma przypisany„ID„Wartość, która musi być taka sama jak„ id ”navbar.
• Następnie dodaj „„Element, który zawiera zawartość navbar.
• Elementy paska nawigacyjnego są określone za pomocą „Navbar-Bar" klasa.
• Następnie elementy są dostosowywane za pomocą „Nav-Item„Klasa w obrębie znacznika„ ”.

Html

Bez klasy „Plud pojemnika”, pasek Navek wygląda tak:

Przykład 2: Navbar z klasą „kontener-płyn”
Dodaj "Pojemnik-płyn„Klasa w„„Element i dodaj pasek nawigacyjny, zaimplementowany w poprzednim przykładzie, wewnątrz tego elementu„ ”:

Wyjście

Z powodzeniem dowiedziałeś się o bootstrapie ”Pojemnik-płyn" klasa.

Wniosek

„„Pojemnik-płyn”Klasa w Bootstrap zapewnia pojemniki na pełną szerokość dla komponentów. Ta klasa ma predefiniowane CSS ”szerokość„Własność o wartości”100%". Aby utworzyć pasek NAV z responsywną, pełną szerokością, przypisz „Pojemnik-płyn„Klasa do„