Css

Bootstrap 4 juster navigeringslistelementene til høyre

Bootstrap 4 Align Navbar Items Right



Løsning:

Bootstrap 4 har mange forskjellige måter å justere navbar -elementer på.float-right vil ikke fungere fordi navbar er nåfleksiboks.

Du kan brukemr-auto for automatisk høyre marg på 1. (venstre)navbar-nav. Alternativt ,ml-auto kan brukes på 2. (Ikke sant)navbar-nav, eller hvis du bare har en singelnavbar-nav.



  Navbar      
https://codeply.com/go/P0G393rzfm
 
 
 
Det er også flexbox -verktøy. For eksempel brukjustify-content-end på skjermmenyen:
 
 
 
  Merke     
Eller når du har 2navbar-navs, brukrettferdiggjøre-innhold-mellom inavbar-kollaps ville fungere til å jevne mellomrom mellom navbar-navs:
 
 
    ..
 
    ..
  
 
  Oppdatering for Bootstrap 4.0 og nyere  
 
Fra Bootstrap 4 beta,ml-auto vil fortsatt fungere for å skyve elementer til høyre. Bare vær oppmerksom pånavbar-skiftbare klasser har endret seg tilnavbar-expand-*
 
 
 
Oppdatert navbar til høyre for Bootstrap 4
 
 
Et annet hyppig Bootstrap 4 Navbar høyre justeringsscenario inkluderer en knapp til høyre som forblir utenfor mobilkollapsen nav slik at den alltid vises i alle bredder.
 
Høyre justeringsknapp som alltid er synlig
 
 skriv inn bildebeskrivelse her
 
 skriv inn bildebeskrivelse her
 
Relatert: Bootstrap NavBar med venstre, senter eller høyre justerte elementer
 
 
  Oppdatering for Bootstrap 5 (se dette spørsmålet).ml-auto er erstattet medms-auto å representerestart i stedet forvenstre.
  
I mitt tilfelle ønsket jeg bare ett sett med navigasjonsknapper / alternativer og fant ut at dette vil fungere:
 
   
Så du vil legge tiljustify-content-end til div og utelatmr-auto på listen.
 
Her er et fungerende eksempel.
  
For de som fortsatt sliter med dette problemet i BS4, prøv bare koden nedenfor -