Qual è la classe Container-Fluid bootstrap?

Il framework CSS noto come Bootstrap offre un'ampia varietà di classi predefinite. Queste classi sono utilizzate per progettare rapidamente qualsiasi applicazione web. Più specificamente, le classi di container sono una di queste. Bootstrap offre tre tipi di lezioni di container. Questi sono "Container-Fluid","contenitore", E "Container- Breakpoint". Queste classi di container contengono, allineano al centro e abbracciano il contenuto e rendono il componente reattivo.

Questo articolo descriverà la classe Container-Fluid Bootstrap.

Qual è la classe Bootstrap "Container-Fluid"?

IL "Container-Fluid"La classe in bootstrap viene utilizzata per fornire un contenitore a tutta larghezza. Ha le seguenti proprietà predefinite CSS:

.Container-fluid
larghezza: 100%;
imbottitura-destra: 15px;
imbottitura-sinistra: 15px;
margine-destra: auto;
Margin-Left: Auto;

La spiegazione delle proprietà CSS sopra menzionate sono descritte di seguito:

• "larghezzaLa proprietà "ha un valore di"100%"Il che indica che gli elementi avranno l'intera larghezza.
• "imbottitura-destraLa proprietà "è impostata con il valore di"15px", Che aggiunge un po 'di spazio sul lato destro del contenuto dell'elemento.
• "imbottitura-sinistra"È impostato con il valore"15px"E aggiunge lo spazio a sinistra del contenuto dell'elemento.
• "margine-destra" E "margine-sinistra"Le proprietà sono impostate con il valore"auto", Che regola l'elemento al centro.

Come utilizzare la classe Bootstrap "Container-Fluid"?

Implettiamo i seguenti esempi per vedere come "Container-Fluid"La classe influisce sul layout della barra di navigazione Bootstrap:

• Navbar senza il "Container-Fluid" Classe
• Navbar con il "Container-Fluid" Classe

Esempio 1: Navbar senza la classe "Container-Fluid"
Creiamo una barra di navigazione seguendo i passaggi:

• Innanzitutto, aggiungi il “
• Dentro il "
• Quindi, aggiungi il ""Elemento con la classe"Navbar-Toggler". Aggiungi il "Data-Toggle" E "target dati"Attributi e quindi includere l'icona del toggler all'interno del""Tag.
• IL "target dati"Attributo è assegnato il"id"Valore, che deve essere uguale al" ID "della barra navigabile.
• Quindi, aggiungi il ""Elemento, che contiene il contenuto di navigazione.
• Gli elementi della barra navic sono specificati utilizzando il "navbar-bar" classe.
• Quindi, gli elementi vengono regolati utilizzando il "Nav-Item"Classe all'interno del tag" ".

Html

Senza la classe "Container-Fluid", la barra di navigazione sembra così:

Esempio 2: Navbar con la classe "Container-Fluid"
Aggiungi il "Container-Fluid"Classe all'interno della""Elemento e aggiungere la barra di navigazione, implementata nell'esempio precedente, all'interno di questo elemento" ":

Produzione

Hai imparato con successo il bootstrap "Container-Fluid" classe.

Conclusione

IL "Container-Fluid"La classe in bootstrap fornisce contenitori a larghezza intera per i componenti. Questa classe ha il CSS predefinito "larghezza"Proprietà con il valore"100%". Per creare la barra navy con una larghezza reattiva e completa, assegnare "Container-Fluid”Classe per la"