Hvordan justere høyre i bootstrap

Mens du utvikler en hvilken som helst applikasjon, er det viktig å vurdere riktig innretting og plassering av komponentene. Denne tilnærmingen hjelper utviklere til å gjøre applikasjonen mer profesjonell. Justeringen refererer til ordningen med elementer. Mer spesifikt, i Bootstrap, kan flere klasser brukes til å justere elementets justering, for eksempel "tekst-høyre”,“flyte-høyre", og mange flere.

Denne oppskrivningen vil instruere deg om hvordan du skal samkjøre rett i bootstrap.

Hvordan justere høyre i bootstrap?

Det er flere måter å rette opp gjenstander i bootstrap. Noen av dem er listet opp nedenfor:

• • Flyte-høyre klasse
  • Justify-Content-End
  • Align-elems-end
  • Align-Self-End
  • ML-Auto
  • tekst-høyre

Metode 1: Hvordan justere høyre i bootstrap ved hjelp av "Float-Right" -klassen?

I bootstrap, "flyte-høyre”Klasse plasserte elementet på høyre side.

Eksempel

I dette eksemplet vil vi bruke “flyte-høyre”Klasse i“ ”elementet:

ved hjelp av float-høyre klasse

Produksjon

Metode 2: Hvordan justere høyre i bootstrap ved hjelp av "Justify-Content-End" -klassen?

Bootstrap -klassen "Justify-Content-End”Brukes med fleksible gjenstander. Så "d-flex”Klasse er også lagt til“ ”elementet:

Bruke Justify-Content-End

Produksjon

Metode 3: Hvordan justere høyre i bootstrap ved hjelp av "Align-Items-End" -klassen?

“Align-elems-end”Er verktøyklassen til“Align-elementer”. Disse klassene brukes til å justere justeringene av flex -elementene. Så D-Flex-klassen gjør elementets skjerm flex. Deretter, inni denne "" -beholderen, legger du til to elementer:

Punkt 1

Produksjon

Metode 4: Hvordan justere høyre i bootstrap ved hjelp av "Align-Self-End" -klassen?

“Align-Self-End”Klassen brukes til å stille inn justeringen av enkeltartikler til høyre.

Eksempel

La oss forstå ved hjelp av det under-uttalte eksemplet:

• • Legg til en "”Element og tilordne det“d-flex”Og“Flex-kolonne”Klasser.
  • Inne i “" elementet, spesifiser tre underholdigere.
  • Tilordne “Align-Self-End”Klasse til det andre“ ”elementet:

linje 1

Produksjon

Metode 5: Hvordan justere høyre i Bootstrap ved hjelp av "ML-Auto" -klassen?

“ML-Auto”Klasse legger til marginplass på elementets venstre. Å bruke det:

• • Spesifiser “”Element med klassen“ D-flex ”.
  • Opprett deretter en knapp ved hjelp av "btn”,“BTN-UTLINE-PRIMARI”, Og“ML-Auto”Klasser:

ML-Auto-knapp

Produksjon

Metode 6: Hvordan justere høyre i bootstrap ved hjelp av "tekst-høyre" -klassen?

“tekst-høyre”Klassen justerer teksten på høyre side. I eksemplet nedenfor, legg til en "

”Element og tilordne det en“tekst-høyre”Klasse:

Denne teksten er riktig justert.

Produksjon

Det handlet om å sette riktig justering i bootstrap.

Konklusjon

Flere klasser i bootstrap brukes til å angi riktig tekstjustering, for eksempel "flyte-høyre”,“Justify-Content-End”,“Align-elems-end”,“Align-Self-End”,“ML-Auto”, Og“tekst-høyre”. Noen klasser jobber imidlertid med elementene med display “Flex”. Dette innlegget har illustrert hvordan du kan samkjøre rett i bootstrap ved hjelp av flere metoder.