Was ist die Bootstrap Container-Fluid-Klasse?

Das CSS -Framework, das als Bootstrap bekannt ist, bietet eine Vielzahl von vordefinierten Klassen. Diese Klassen werden verwendet, um jede Webanwendung schnell zu entwerfen. Insbesondere sind Containerklassen einer von ihnen. Bootstrap bietet drei Arten von Containerklassen. Diese sind "Containerfluid","Container", Und "Container- Breakpoint”. Diese Containerklassen enthalten, zentrieren und padeln den Inhalt und machen die Komponente reaktionsschnell.

In diesem Artikel wird die Bootstrap-Container-Fluid-Klasse beschrieben.

Was ist die Bootstrap-Klasse „Container-Fluid“?

Der "Containerfluid”Klasse in Bootstrap wird verwendet, um einen Vollbreite Container bereitzustellen. Es hat die folgenden CSS -vordefinierten Eigenschaften:

.Containerfluid
Breite: 100%;
Padding-Right: 15px;
Padding-Links: 15px;
Margin-Right: Auto;
Rand-Links: Auto;

Die Erklärung der oben genannten CSS-Eigenschaften wird unten beschrieben:

• “Breite"Eigentum hat einen Wert von"100%Das gibt an, dass die Elemente die volle Breite haben werden.
• “Polsterrechte"Eigenschaft wird mit dem Wert von" festgelegt "15px”, Was einen Platz auf der rechten Seite des Inhalts des Elements hinzufügt.
• “Padding-Links"Wird mit dem Wert eingestellt"15pxUnd fügt den Raum links vom Inhalt des Elements hinzu.
• “Randrecht" Und "links"Eigenschaften werden mit dem Wert festgelegt"Auto”, Der das Element in der Mitte anpasst.

So verwenden Sie die Bootstrap-Klasse „Container-Fluid“?

Lassen Sie uns die folgenden Beispiele implementieren, um zu sehen, wie die “ContainerfluidDie Klasse betrifft das Layout der Bootstrap -Navigationsleiste:

• Navillon ohne die “Containerfluid" Klasse
• Navillat mit dem “Containerfluid" Klasse

Beispiel 1: NAVABAR Ohne die Klasse „Container-Fluid“
Erstellen wir eine Navigationsleiste, indem wir den Schritten folgen:

• Zunächst fügen Sie die "hinzu"
• Im Inneren "
• Dann fügen Sie das hinzu “"Element mit der Klasse"Navi-Toggler”. Ergänzen Sie die "Data-Toggle" Und "DatenzielAttribute und dann das Toggler -Symbol in die “eingeben" Schild.
• Der "DatenzielDas Attribut wird zugewiesenAusweis"Wert, der mit der" ID "der Navigationsleiste übereinstimmen muss.
• Dann fügen Sie das hinzu “Element, das den Navigationsinhalt enthält.
• Die Elemente der NAVAIL werden mit der “angegebenNavigationsbar" Klasse.
• Dann werden die Elemente mit dem “angepasstNAV-ITEMKlasse innerhalb des "" Tags.

Html

Ohne die Klasse „Container-Fluid“ sieht die Navigationsleiste so aus:

Beispiel 2: NAVABAR mit der Klasse „Container-Fluid“
Ergänzen Sie die "Containerfluid"Klasse innerhalb der"Element und fügen Sie die im vorherige Beispiel implementierte Navigationsleiste in dieses "" -Erement hinzu:

Ausgang

Sie haben erfolgreich etwas über die Bootstrap erfahren. “Containerfluid" Klasse.

Abschluss

Der "Containerfluid”Klasse in Bootstrap bietet Container in voller Breite für die Komponenten. Diese Klasse hat das vordefinierte CSS “Breite”Eigenschaft mit dem Wert“100%”. Um die NAVABAR mit reaktionsschnell, vollerbreite Breite zu erstellen, weisen Sie die “zu, die“ zuweisenContainerfluid"Klasse zum"