Bootstrap 4 justerer navigasjonsfeltelementer til høyre

Hvordan justerer jeg et navigeringselement til høyre?

Jeg vil ha innlogging og registrering til høyre. Men alt jeg prøver ser ikke ut til å fungere.

[!

Dette er hva jeg har prøvd så langt:

  • <div> rundt <ul> med atributtet: style="float: right" -
    rundt
      ` med attributtet:?
    • <div> rundt <ul> med attributtet: style= "text-align: right"
    • prøvde disse to tingene på <li>-taggene
    • prøvde alle disse tingene igjen med !important lagt til til slutt
    • endret nav-element til nav-right i <li>
    • lagt til en pull-sm-right klasse i <li>
    • lagt til en align-content-end klasse til <li>

    Dette er koden min:

    <div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>
    Zim
    Redigerte spørsmål 20. desember 2018 в 9:53
    Programmering
    css twitter-bootstrap flexbox bootstrap-4 navbar
    6. januar 2017 в 8:02
    8 visninger
    Løsning

    Bootstrap 4 har mange forskjellige måter å justere navigasjonsfeltelementer på. float-right vil ikke fungere fordi navigasjonsfeltet nå er flexbox.

    Du kan bruke den nye mr-auto for automatisk høyremargin på 1st (venstre) navbar-nav. Alternativt kan ml-auto brukes på 2nd (høyre) navbar-nav, eller hvis du bare har en enkelt navbar-nav.

    <div id="app" class="container">


      <span class="navbar-toggler-icon"></span>

    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>

</div>

    http://www.codeply.com/go/P0G393rzfm

    Det finnes også flexbox-verktøy. I dette tilfellet har du 2 navbar-nav, så justify-content-between i navbar-collapse vil fungere på mellomrommet mellom dem,

     <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>
    **Oppdatering for Bootstrap 4.0 og nyere**

    Fra og med Bootstrap 4 beta vil ml-auto fortsatt fungere for å skyve elementer til høyre. Bare vær oppmerksom på at navbar-toggleable- klassene er endret til navbar-expand-*.

    Oppdatert navbar 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øyrejusteringsknapp som alltid er synlig

    ]1

    ]2

    Relatert: https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-or-right-aligned-items/20362024#20362024

    Zim
    Redigert svar 15. august 2018 в 1:04
    Kommentarer (7)

    I mitt tilfelle ønsket jeg bare ett sett med navigasjonsknapper / alternativer og fant ut at dette vil fungere:

    <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Sign Out</a>
    </li>
  </ul>
</div>

    Så du vil legge til justify-content-end til div og utelate mr-auto på listen.

    Her er et fungerende eksempel.

    Kommentarer (6)

    Jeg er ny til stack overflow og ny til frontend-utvikling. Dette er hva som fungerte for meg. Så jeg ville ikke at listeelementer skulle vises.

    .hidden {
  display:none;
  } 

 #loginButton{

 margin-right:2px;

 }
    

    <span class="navbar-toggler-icon"></span>

  <a class="navbar-brand" href="#">NavBar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active hidden">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>

      <a href="#">Log In</a>
      <a href="#">Register</a>

  </div>
    Kommentarer (0)