Wie man links und rechts den Text innerhalb eines DIV in Bootstrap ausrichten

Die Anordnung der Elemente der Anwendung wird als Ausrichtung bezeichnet. Es hilft bei der Schaffung eines ordentlichen Designs und hält sie davon fern, ein ungeordnetes Chaos zu sein. Bootstrap bietet viele vordefinierte Klassen, die für diesen Zweck verwendet werden. Diese Klassen umfassen "links","Pull-Rechts","float-links", und viele mehr.

In diesem Artikel wird erklärt, wie Sie die rechte und linke Ausrichtung des Textes innerhalb eines „“ in Bootstrap festlegen.

Wie man rechte und linke Text in einem DIV mit Bootstrap ausrichten?

Es werden verschiedene Möglichkeiten verwendet, um die Textausrichtung innerhalb von a anzupassen

Container. Wir werden jedoch Folgendes besprechen:

• Methode 1: Setzen Sie die linke und rechte Ausrichtung mit “links" Und "Pull-Rechts" Klasse
• Methode 2: Setzen Sie die rechte und linke Ausrichtung mit der “schweben rechts" Und "float-links" Klassen
• Methode 3: Links- und Rechte Ausrichtung mit der “Begründung zwischeneinander" Klasse

Methode 1: Setzen Sie den linken und rechten Text mithilfe der Klasse „Pull-Links“ und „Pull-Light“ -Klasse

In Bootstrap 3 die “Pull-Rechts" Und "linksKlassen werden verwendet, um die Ausrichtung des Textes auf der rechten bzw. linken Seite festzulegen.

Das folgende Beispiel zeigt die praktische Demonstration der oben diskutierten Klassen:

Zuerst fügen Sie eine "hinzu"" mit dem "ClearFix" Und "BG-Info" Klassen.

Fügen Sie im erstellten Container zwei weitere hinzu “Tags, die Inhalte halten. Dem ersten wird die Klasse "Pull-Lekt" zugewiesen, dem anderen, der eine "Pull-Light" -Klasse zugewiesen wird.

Html

Kosten
$ 30

Hier:

• “ClearFixDie Klasse wird verwendet, um schwebende Inhalte zu löschen. Ohne es wäre das Layout gebrochen.
• “linksDie Klasse richtet den Text auf der linken Seite aus.
• “Pull-RechtsDie Klasse richtet den Text auf der rechten Seite aus.

Es kann beobachtet werden, dass der Text “Kosten”Wird links ausgerichtet, während der relevante Dollarwert rechts ausgerichtet ist:

Methode 2: Rechte und linke Ausrichtung des Textes mit den Klassen „Float-Right“ und „Float-Links“ einstellen

In Bootstrap 4 das “float-links" Und "schweben rechtsKlassen werden verwendet, um die linken und rechten Elemente auszurichten. Um sie zu nutzen, werden wir zuerst:

• Fügen Sie ein "" -Element hinzu und zuweisen Sie es "BG-Warnung" Und "ClearFix" Klassen.
• Fügen Sie im Inneren zwei weitere „“ Elemente hinzu, die Text enthalten.
• Präzisiere das "float-linksKlasse zum ersten Behälter, der den Text links schwimmt.
• Zuweisen Sie die “schweben rechts”Zum„ “, der den Text nach rechts schwimmt.

Hier ist der HTML -Code:

Punktzahlen
500

Ausgang

Methode 3: Links und rechts ausrichten Text unter Verwendung der Klasse „Justify-Incontent-zwischen“

In Bootstrap 4 das “Begründung zwischeneinanderDie Klasse verteilt den gleichen Raum zwischen den flexiblen Elementen.

Das folgende Beispiel zeigt eine „“ -Klasse mit “BG-Info","D-Flex", Und "Begründung zwischeneinander" Klassen:

Gesamtkosten
$ 50

Ausgang

Mit diesen Bootstrap-Klassen ist der Text im „“ Container rechts und links ausgerichtet.

Bonuspipp
Wenn Sie alle flexiblen Gegenstände links ausrichten möchten, verwenden Sie die BootstrapRechtfertigungsstart"Klasse, und wenn die flexiblen Gegenstände richtig ausgerichtet werden müssen, verwenden Sie die"Justify-Content-End" Klasse.

Abschluss

Nach rechts und links richten Sie den Text innerhalb eines "" -Elements aus, mehrere Klassen werden verwendet. In Bootstrap 3 die “links" Und "Pull-Rechts”Klassen werden genutzt. In Bootstrap 4 das “float-links" Und "schweben rechts”Klassen können verwendet werden. Die flexiblen Elemente werden durch die Verwendung der “ausgerichtetBegründung zwischeneinander" Klasse. In diesem Beitrag wurde erklärt.