Jak wyrównać tekst w lewo i w prawo w div w bootstrapie

Umieszczenie elementów wniosku jest określane jako wyrównanie. Pomaga w tworzeniu schludnego projektu i powstrzymuje go przed nieuporządkowanym bałaganem. Bootstrap zapewnia wiele predefiniowanych klas, które są używane do tego celu. Te zajęcia obejmują „Pull-left”,„Przuszony”,„Float-left", i wiele więcej.

Ten zapis wyjaśni, jak ustawić prawo i lewe wyrównanie tekstu w „” w bootstrapie.

Jak po prawej i lewy tekst wyrównaj w div za pomocą bootstrap?

W celu dostosowania wyrównania tekstu w ramach wyrównania tekstu

pojemnik. Omówimy jednak następujące czynności:

• Metoda 1: Ustaw wyrównanie w lewo i prawo za pomocą „Pull-left" I "Przuszony" Klasa
• Metoda 2: Ustaw w prawo i lewe wyrównanie za pomocą „float-right" I "Float-left„Zajęcia
• Metoda 3: Wyrównanie lewej i prawej przy użyciu „justify-content-między" Klasa

Metoda 1: Ustaw tekst wyrównania w lewo i w prawo za pomocą klasy „Pull-Left” i „Pull-Right”

W Bootstrap 3, „Przuszony" I "Pull-left„Klasy są wykorzystywane do ustawienia wyrównania tekstu odpowiednio po prawej i lewej stronie.

Poniższy przykład pokazuje praktyczną demonstrację wyżej wymyślonych klas:

Najpierw dodaj „”Z„Clearfix" I "BG-info„Zajęcia.

Wewnątrz utworzonego pojemnika dodaj jeszcze dwa „”Tagi zawierające trochę treści. Pierwszy przypisuje się klasę „Pull-Left”, a drugą przypisuje się klasę „Pull-Right”.

Html

Koszt
30 USD

Tutaj:

• "Clearfix„Klasa jest wykorzystywana do oczyszczonej zawartości. Bez tego układ zostałby złamany.
• "Pull-left”Klasa wyrównuje tekst po lewej stronie.
• "Przuszony”Klasa wyrównuje tekst po prawej stronie.

Można zauważyć, że tekst „Koszt”Jest wyrównany, podczas gdy odpowiednia wartość dolara jest wyrównana w prawo:

Metoda 2: Ustaw w prawo i lewy tekst wyrównany za pomocą klas „Float-Right” i „Float-lew”

W Bootstrap 4, „Float-left" I "float-right”Klasy są wykorzystywane do wyrównania elementów w lewo i w prawo. Aby je wykorzystać, najpierw:

• Dodaj element „” i przypisz go „Warning BG" I "Clearfix„Zajęcia.
• Wewnątrz dodaj dwa kolejne elementy „” zawierające tekst.
• Określić "Float-left„Klasa do pierwszego pojemnika, który unosi tekst po lewej stronie.
• Przypisz „float-right„Do„ ”, który unosi tekst po prawej stronie.

Oto kod HTML:

Wyniki
500

Wyjście

Metoda 3: Lewy i prawy tekst wyrównany za pomocą klasy „Justify-Content-Between”

W Bootstrap 4, „justify-content-między„Klasa rozkłada równą przestrzeń między elastycznymi elementami.

Poniższy przykład pokazuje klasę „” o „”BG-info”,„D-flex", I "justify-content-między„Zajęcia:

Całkowity koszt
50 USD

Wyjście

Korzystając z tych klas bootstrap, tekst w pojemniku „” jest prawy i wyrównany na lewo.

Bonusowa wskazówka
Jeśli chcesz wyrównać wszystkie elastyczne elementy po lewej stronie, użyj bootstrap ”justify-content-start”Klasa, a jeśli elastyczne elementy muszą być wyrównane w prawo, użyj„Justify-Content-end" klasa.

Wniosek

Po prawej i lewej części tekstu w elemencie „”, wykorzystywane jest kilka klas. W Bootstrap 3, „Pull-left" I "Przuszony”Klasy są wykorzystywane. W Bootstrap 4, „Float-left" I "float-right”Klasy można użyć. Elastyczne elementy są wyrównane przy użyciu „justify-content-między" klasa. Ten post wyjaśnił, jak ustawić lewe i prawe wyrównanie tekstu w pojemniku „” w bootstrapie.