Jak wyrównać prawicę w bootstrapie

Podczas opracowywania dowolnego zastosowania konieczne jest rozważenie właściwego wyrównania i pozycji komponentów. To podejście pomaga programistom uczynić aplikację bardziej profesjonalną. Wyrównanie odnosi się do układu przedmiotów. Mówiąc dokładniej, w bootstrap można użyć kilku klas do dostosowania wyrównania elementu, takich jak „prawy tekst”,„float-right", i wiele więcej.

Ten zapis będzie instruuje, jak wyrównać się w bootstrapie.

Jak wyrównać prawicę w bootstrapie?

Istnieje kilka sposobów na wyrównanie pozycji w bootstrapie. Niektóre z nich są wymienione poniżej:

• • Klasa z prawej float
  • Justify-Content-end
  • Align-Iteme-end
  • wyrównanie samego siebie
  • ML-AUTO
  • prawy tekst

Metoda 1: Jak wyrównać prawy w bootstrap przy użyciu klasy „float-right”?

W bootstrapie „float-right”Klasa umieściła element po prawej stronie.

Przykład

W tym przykładzie użyjemy „float-right„Klasa w elemencie„ ”:

za pomocą klas float-right

Wyjście

Metoda 2: Jak wyrównać prawy w bootstrap przy użyciu klasy „Justify-Content-end”?

Klasa bootstrap „Justify-Content-end”Jest używany z elastycznymi przedmiotami. Więc „D-flex„Klasa jest również dodawana do elementu„ ”:

Korzystanie z Justify-Content-End

Wyjście

Metoda 3: Jak wyrównać prawą w bootstrap przy użyciu klasy „wyrównania-elementów”?

„„Align-Iteme-end”To klasa użyteczności„Wyrównanie". Klasy te służą do dostosowania wyrównania elementów Flex. Tak więc klasa D-Flex sprawia, że ​​wyświetlacz elementu jest elastycznie. Następnie, wewnątrz tego pojemnika „”, dodaj jeszcze dwa elementy:

Przedmiot 1

Wyjście

Metoda 4: Jak wyrównać prawy w bootstrap przy użyciu klasy „wyrównania samego siebie”?

„„wyrównanie samego siebie„Klasa jest wykorzystywana do ustawiania pojedynczych elementów„ wyrównanie się na prawo.

Przykład

Zrozum się z pomocą poniżej wyrażonego przykładu:

• • Dodać "”Element i przypisz go„D-flex" I "Flex-kolumna„Zajęcia.
  • Wewnątrz elementu „” określ trzech subkontainerów.
  • Przypisz „wyrównanie samego siebie„Klasa do drugiego elementu„ ”:

linia 1

Wyjście

Metoda 5: Jak wyrównać prawy w bootstrap za pomocą klasy „ML-AUTO”?

„„ML-AUTO„Klasa dodaje przestrzeń marginesu po lewej stronie elementu. Aby go wykorzystać:

• • Określić "„Element z klasą„ D-flex ”.
  • Następnie utwórz przycisk za pomocą „Btn”,„BTN-Outline-Primary", I "ML-AUTO„Zajęcia:

Przycisk ML-AUTO

Wyjście

Metoda 6: Jak wyrównać prawy w bootstrap za pomocą klasy „Right”?

„„prawy tekst”Klasa wyrównuje tekst po prawej stronie. W poniższym przykładzie dodaj „

”Element i przypisz go„prawy tekst" klasa:

Ten tekst jest zgodny.

Wyjście

Chodziło o ustawienie odpowiedniego wyrównania w bootstrapie.

Wniosek

Do ustawienia właściwego wyrównania tekstu, takich jak „float-right”,„Justify-Content-end”,„Align-Iteme-end”,„wyrównanie samego siebie”,„ML-AUTO", I "prawy tekst". Jednak niektóre klasy działają na elementach z wyświetlaczem ”przewód". Ten post ilustruje, jak wyrównać w prawo w bootstrap przy użyciu wielu metod.