Hva er bootstrap container-fluid-klassen?

CSS -rammeverket kjent som Bootstrap tilbyr et bredt utvalg av forhåndsdefinerte klasser. Disse klassene brukes raskt til å designe alle webapplikasjoner. Mer spesifikt er containerklasser en av dem. Bootstrap tilbyr tre typer containerklasser. Disse er "Container-fluid”,“container”, Og“container- breakpoint”. Disse beholderklassene inneholder, senter juster og pad innholdet og gjør komponenten lydhør.

Denne oppskrivningen vil beskrive Bootstrap Container-Fluid-klassen.

Hva er Bootstrap “Container-Fluid” -klassen?

“Container-fluid”Klasse i Bootstrap brukes til å gi en full breddebeholder. Den har følgende CSS forhåndsdefinerte egenskaper:

.container-fluid
Bredde: 100%;
Padding-høyre: 15px;
Padding-venstre: 15px;
Margin-høyre: auto;
margin-venstre: auto;

Forklaringen på de ovennevnte CSS-egenskapene er beskrevet nedenfor:

• “bredde”Eiendom har en verdi av“100%”Som indikerer at elementene vil ha full bredde.
• “Padding-høyre”Eiendom er satt med verdien av“15px”, Som tilfører litt plass på høyre side av elementets innhold.
• “Padding-venstre”Er satt med verdien”15px”Og legger til plassen til venstre for elementets innhold.
• “margin-høyre”Og“margin-venstre”Egenskaper er satt med verdien”bil”, Som justerer elementet i sentrum.

Hvordan bruke Bootstrap “Container-Fluid” -klassen?

La oss implementere følgende eksempler for å se hvordan "Container-fluid”Klassen påvirker Bootstrap Navigation Bars oppsett:

• Navbar uten "Container-fluid”Klasse
• Navbar med “Container-fluid”Klasse

Eksempel 1: Navbar uten "container-fluid" -klassen
La oss opprette en navigasjonslinje ved å følge trinnene:

• Først, legg til “
• Inne i "
• Deretter legger du til “”Element med klassen“Navbar-Togggler”. Legg til "Data-toggle”Og“Datapål”Attributter og inkluderer deretter Toggler -ikonet i“" stikkord.
• “Datapål”Attributt tildeles“id”Verdi, som må være den samme som“ ID ”til navbaren.
• Deretter legger du til “”Element, som inneholder Navbar -innholdet.
• Elementene i navbaren er spesifisert ved hjelp av “Navbar-Bar”Klasse.
• Deretter justeres varene ved hjelp av “Nav-element”Klasse innenfor“ ”-merket.

Html

Uten "container-fluid" -klassen ser Navbar ut slik:

Eksempel 2: Navbar med "container-fluid" -klassen
Legg til "Container-fluid”Klasse innenfor“”Element og legg til navigasjonslinjen, implementert i forrige eksempel, inne i dette“ ”elementet:

Produksjon

Du har lært om bootstrap “Container-fluid”Klasse.

Konklusjon

“Container-fluid”Klasse i Bootstrap gir containere med full bredde for komponentene. Denne klassen har den forhåndsdefinerte CSS “bredde”Eiendom med verdien”100%”. For å lage navbaren med responsiv, full bredde, tilordne “Container-fluid”Klasse til“